I have static header and footer outside my angular app, and i need to show some variable there.
<some-html>variable</some-html>
<app-root></app-root>
That string i am getting from the cookie service inside my angular app. Actually i know that i can write some logic outside angular app and get this data separately.
But i wonder are that any other possible way to pass this data to outer markup, that are outside app-root?
If you want to use variables outside the application you can use sessionStorage, sessionStorage is bound to the browser tab. If want it in multiple tabs use localStorage.
Example:
sessionStorage.setItem('variable', JSON.stringify(variable));
To get the variable can use:
JSON.parse(sessionStorage.getItem('variable'));
Property binding doesn't work on the root components, i.e. the components you bootstrap.
The reason why this is not working is that your index.html in which you place the
is not an angular component. Because of this, Angular won't compile this element. And Angular does not read attribute values during runtime, only during compile time, as otherwise, we would get a performance hit. (Tobias Bosch)
Quoting @Thierry Templier from Pass data from html body to root component
A workaround would be to leverage the DOM:
<my-app bodyData="passed" ></my-app>and in the component:
@Component({
selector: 'my-app',
template: `
(...)
`
})
export class MyAppComponent {
constructor(private eltRef:ElementRef) {
let prop = eltRef.getAttribute('bodyData');
}
}
