0

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?

Kraken
  • 1,905
  • 12
  • 22

2 Answers2

1

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'));

Swoox
  • 3,707
  • 2
  • 21
  • 32
0

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');
  }
}
filipbarak
  • 1,835
  • 2
  • 17
  • 28
  • 1
    I don't want any property binding, i just want this variable to be on window.myVarable accesible. All i wrote it is just scheme to show that i want to achieve. – Kraken Feb 21 '18 at 12:46
  • I must've misunderstood. You want to pass data from inside Angular to the index.html file that wraps the ? – filipbarak Feb 21 '18 at 12:51