0

I have a server side rendered page and I would like to be able to dynamically set the input values of the Angular component from the webpage.

<body>
  <testcmp [testa]="'Blue322'"></testcmp>
</body>

http://plnkr.co/edit/YoZOnGWI6R1Urj89tJAZ?p=preview

I notice that I am only able to set the values of the component from a template ('testb' in my plunkr) but not from outside ('testa').

What do I need to do to be able to set the value of 'testa' from the webpage?

Jonas Arcangel
  • 2,085
  • 11
  • 55
  • 85

2 Answers2

2

If I remember correctly you can't use such things as Input on ROOT component of your app. See: Angular 2 input parameters on root directive

https://github.com/angular/angular/issues/1858#issuecomment-151326461

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.

I.e. this works as intended, please use the code snippet that @Mewel described...

Community
  • 1
  • 1
jmachnik
  • 1,120
  • 9
  • 19
  • Is there any way for the angular application to get a value from the index.html page? – Jonas Arcangel Oct 12 '16 at 09:22
  • Can't figure out any way now. But why you need it in index.html so badly? – jmachnik Oct 12 '16 at 09:24
  • For SEO reasons, my page is dynamically generated from the server. It is actually an aspx page and I want the server to initialize the values in the angular app. – Jonas Arcangel Oct 12 '16 at 09:26
  • Maybe try to make a service which will fetch some parameters from server, then inject this service in root component in onInit. (remember to implement onInit interface). That's the way I would do it but be awaare that I don't have any experience in ASP.Net – jmachnik Oct 12 '16 at 09:29
1

I think that the correct way should be create the angular application and inside the app use the components.

You should not use the components directly on index.html page, you should before bootstrap the application.

EDIT: you can try this workaround

<testcmp testa="Blue322"></testcmp>

import {Component, Input, ElementRef} from 'angular2/core';
...
export class TestCmp {
    testa: string;

    constructor(public elementRef: ElementRef) {
    }

    ngOnInit(){
      this.testa = this.elementRef.nativeElement.getAttribute('testa');
    }
}
dokkis
  • 366
  • 2
  • 8
  • Is there any way for the angular application to get a value from the index.html page? My page is actually an aspx page whose content is dynamically generated from the server. I want to allow this page to set values in the angular app. – Jonas Arcangel Oct 12 '16 at 09:22
  • I edit the answer with the code to let the application work and read the tag, I don't think there is a way to handle this using angular @Input. – dokkis Oct 12 '16 at 09:37
  • It worked. Thanks. I avoided this because I read somewhere that using input is preferable but if it is not possible using input then so be it. – Jonas Arcangel Oct 12 '16 at 10:20
  • It's not possible using @Input because the index.html is not interpreted as angular component and the framework won't compile it, I think it's the only way to go to achieve what you need. You're welcome :) – dokkis Oct 12 '16 at 10:24