how can i have angular2 update content after dynamically loading a component

Question

I have angular2 final version. Have created a component

  @Component({
    selector:'artists',
    template: `
      <h2>Artists Information</h2>
      <ul [style.display]="artists?.length>0 ? 'block':'none'">
        <li ngfor="a in artists">Name: {{a?.name}} - Followers:  {{a?.folloers.total}}</li>
      </ul>
       `
  })
  export class Artists{
    @Input("list")
    private artists:any;
  }

at a later time somewhere in the program i try to dynamically load the component

  @ViewChild('divBody', {read: ViewContainerRef}) private body: ViewContainerRef;

  this.body.clear();
  let factory = this.resolver.resolveComponentFactory(Artists);
  let injector = ReflectiveInjector.fromResolvedProviders([], this.body.parentInjector);   
  let b= this.body.createComponent(factory,0,injector,[]);

  // data is comming from an ajax call to a remote location.
  b.instance.artists = data.artists.items;
  b.changeDetectorRef.detectChanges();

My problem is that the Artists view is not updated and shows a blank list row instead of list of artists.

Question is what am i missing? why template is not update with data even after i call detectChanges() ????

eko · Accepted Answer · 2017-03-10 06:16:49Z

2

<li ngfor="a in artists"

should be

<li *ngFor="let a of artists"

If you have no null elements in artists you don't need ? in {{a?.name}} (within *ngFor)

edited Mar 10, 2017 at 6:16

eko

40.8k11 gold badges79 silver badges104 bronze badges

answered Mar 10, 2017 at 5:50

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Masoud Over a year ago

Thank you very much. that little change fixed the problem.

Günter Zöchbauer Over a year ago

@Masoud if the answer solves your problem, please consider accepting the answer using the checkmark below the up/down-vote button to indicate your problem is solved.

Masoud Over a year ago

I've added bunch of samples on plunker.. hope they become used by the public... "plnkr.co/users/msalehisedeh"

Collectives™ on Stack Overflow

how can i have angular2 update content after dynamically loading a component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related