Pass data from html body to root component

Question

I've been trying to pass data from main layout index.html file to the angular root/starting component <my-app>. Unfortunately I'm unable to pass them like this: <my-app [bodyData]="'passed'" ></my-app> from my index.html.

Can anyone help me how can I pass them? Provided a test link.

Plunker Test App Link

you could create a service and get data from that service inside `App` component — Pankaj Parkar, Aug 09 '16 at 06:02

score 13 · Answer 1 · answered Oct 26 '17 at 20:22

As @Thierry states above, his proposed method is only valid for passing string attributes. Below is a method by which you can pass in an object with defined properties.

Create a class for the data you want to pass.

appdata.ts

export class AppData {
  public isServerRunning: boolean;
  public isDataFromMemory: boolean;
}

Define an instance on the window object containing your startup data

index.html

<script>window.APP_DATA = { isServerRunning: false, isDataFromMemory: false }

Tell the bootstrap code about it.

main.tss

import { AppData } from './app/appdata';

Provide the data via a service to your components

app.module.ts

import { AppData } from './appdata';
...
providers: [AppData,
{
  provide: AppData,
  useValue: window['APP_DATA']
}
],

Access the data from a component

app.component.ts

constructor(appData:AppData) {
    console.log('AppComponent - ', appData);
}

Thanks for taking the time to write this up. It's an elegant solution and works perfectly. — BinarySolo, Feb 14 '18 at 15:44
@John Pankowicz how to pass data from component to index.html? — Pranab V V, Apr 18 '18 at 15:10
@federer Since we can read a property of the window object, I would think we could write to one also. I haven't tried it. Have you? Though I'm not sure why you want to do that. — John Pankowicz, Apr 19 '18 at 20:39

score 10 · Accepted Answer · edited May 23 '17 at 12:25

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)

See this question:

Angular 2 input parameters on root directive

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

This will only work for string attributes...

I am getting a compile error "[ts] Property getAttribute does not exist on type ElementRef". — John Pankowicz, Oct 23 '17 at 21:16
But I can avoid the error by using @Ratnam's technique of first getting the nativeElement and then using getAttribute. — John Pankowicz, Oct 23 '17 at 21:28

score 1 · Answer 3 · edited Aug 10 '16 at 07:35

1

I have tried same scenario. But I am getting the value as null.

In my HTML I have the tag

<my-app myattr="passed" >Loading ..</my-app>

And in the component I have used

constructor(private _elementRef: ElementRef){
    let native = this._elementRef.nativeElement;
    let test = native.getAttribute("myattr");
    alert(test);
}

That alert value is coming as null

edited Aug 10 '16 at 07:35

Nikolay Mihaylov

3,868
8
27
32

answered Aug 10 '16 at 06:35

Ratnam Alubelli

11
1

score 1 · Answer 4 · answered Jun 22 '17 at 06:10

It's always lovely to resurrect long dead topics. Here is my solution. I used localStorage in index.html:

<script>
      localStorage.setItem('startpath', window.location.pathname);
</script>

Then in the app.component simply:

ngOnInit() {

    var startpath = localStorage.getItem('startpath');
    if (startpath) {
        localStorage.removeItem('startpath');
        this._router.navigate([startpath]);
    } else
        this._router.navigate(['/dashboard']);
}

Why on earth would you do such a thing? Angular router should navigate for you by default... — Lansana Camara, Apr 17 '18 at 12:53

Pass data from html body to root component

4 Answers4

Linked