Examples on how to use Global Data State

[prepfarm]

New Feature Proposal

For more information, see the CONTRIBUTING guide.

Description

Document on how to actually use Global Data State with examples for Angular or similar. eg. How to actually pass down props from setup method to the registered page component.

Background

I'm currently struggling with it and I can't find any concrete information about this. I'm able to get data inside of the setup method of the pilet, but unable to figure out how to pass it down actually. I'm not sure if it's a valid option to just register extension and then use that extension while registering the page and passing down the data.

so instead of registering the page like this

piral.registerPage('/sample', piral.fromNg(AppComponent));

to do something like this

piral.registerExtension('angular-pilet', piral.fromNg(AppComponent));
piral.registerPage('/sample', () => (
  <piral.Extension
    name="angular-pilet"
    params={{ foo: 'bar' }}
  />
));

But this obviously doesn't work with Angular as @Input() foo is not receiving anything.

[Florian Rappl]

The global state is for the app shell only. If you want to share (parts of) it with pilets then create a pilet API.

Also please have a look at the examples first (and read the documentation). Params are not forwarded in a decomposed way - your component (in the second example AppComponent is an extension component (just by the registration) and therefore will receive a named input called Props (see https://www.npmjs.com/package/piral-ng#dynamic-props) having the shape of the ExtensionComponentProps (i.e., the input variable will have a params.foo property on it using your example above).

This you can also see in the example that I guess you are mimicking above (https://github.com/piral-samples/angular-lazy-loading/blob/main/src/app/app.component.ts#L11); make it named (using "Props") and use the right shape.