Angular2 property binding with ComponentFactoryResolver

Question

I'm trying to bootstrap multiple angular2 components in one HTML page.

  <body>
    <cart id="cart">Loading CartComponent content here ...</cart>
    <p>The text between components</p>
    <item [itemId]="1" [itemName]="Cool Item1" id="item-1">Loading ItemComponent id=1 content here ...</item>
    <p>The text between components</p>
    <item [itemId]="2" [itemName]="Cool Item2" id="item-2">Loading ItemComponent id=2 content here ...</item>
    <p>The text between components</p>
    <item [itemId]="3" [itemName]="Cool Item3" id="item-3">Loading ItemComponent id=3 content here ...</item>

  </body>

So far everything works fine except property binding of properties that are passed in index.html from a server.

Here is the plunker https://plnkr.co/edit/5DbVda?p=preview

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

2

Binding on the root element tag are generally not supported in Angular2.

You can work around using

export class AppComponent {
  constructor(elementRef:ElementRef) {
    console.log(elementRef.nativeElement.getAttribute('inputField));
  }
}

See also Initialize Angular 2 component with attribute

edited May 23 '17 at 12:25

Community

1
1

answered Nov 24 '16 at 15:56

Günter Zöchbauer

623,577
216
2,003
1,567

Angular2 property binding with ComponentFactoryResolver

1 Answers1