Unable to find variable inside *ngFor in Angular 2

Question

My CoreComponent tells my NotificationsService to show a new notification and passes an html string in the content property:

export class CoreComponent {

  constructor(private _notificationsService: NotificationsService) {
    this._notificationsService.show({content: '<h1 (click)="close()">hej hej</h1>'});
  }
}

Then my NotificationsComponent comes into play after the NotificationsService have forwarded the notification to the component, this component must render a fake component so all bindings and directives set on the html in content will work:

export class NotificationsComponent {
  public notifications: string[] = [];

  constructor(private _notificationsService: NotificationsService, dcl: DynamicComponentLoader, elementRef: ElementRef, injector: Injector) {

    _notificationsService.newNotification$.subscribe(
      notification => {

        this.notifications.push(notification);

        if (notification.content) {

          dcl.loadIntoLocation(toComponent(notification.content, []), elementRef, 'content');

          function toComponent(template, directives = []) {

            @Component({
              selector: 'custom-content',
              template: template,
              directives: directives
            })

            class FakeComponent {}

            return FakeComponent;
          }
        }
      }
    )
  }
}

Then it renders a notification with an *ngFor loop:

<div>
  <ul>
    <li *ngFor="#notification of notifications">
      <div #content></div>
    </li>
  </ul>
</div>

The problem though is that it can't find the #content variable for some reason, it just throws an Uncaught Could not find variable content. My guess is because it's inside a loop, but I really don't know why if that is the case.

How can I render this fake component into the notifications template (preferably before pushing notification into public notifications so the component is actually there from the start when showing a new notification)?

EDIT: I found out that without the *ngFor my code works, but there is something about the loop that is causing issues here. Does anyone know why this is happening?

I guess the problem is that you generate several elements with the `#content` template variable. — Günter Zöchbauer, Apr 05 '16 at 10:40
@GünterZöchbauer But if that's the case why doesn't it render 1 element and any elements added after that throws an error? Doesn't make sense. — Chrillewoodz, Apr 05 '16 at 10:44
You are right, it should work. See also https://github.com/angular/angular/issues/6920 — Günter Zöchbauer, Apr 05 '16 at 10:50
@GünterZöchbauer Also tried using ngOnInit but yields the same result, it seems like it's trying to render the fake component before the template has rendered in some way. — Chrillewoodz, Apr 05 '16 at 10:57
I don't see any reason for using `*ngFor`, I think you could accomplish the result you want with just `
` — Abdulrahman Alsoghayer, Apr 05 '16 at 11:08
@Abdulrahman That will only allow one notification at a time unfortunately, which is not the end result I desire. — Chrillewoodz, Apr 05 '16 at 11:10
@Abdulrahman Interestingly enough it works if I remove the *ngFor, but like I said, not the result I wish. — Chrillewoodz, Apr 05 '16 at 11:13
@GünterZöchbauer It works without the *ngFor, any idea why? — Chrillewoodz, Apr 05 '16 at 11:14
[check this plunker](http://plnkr.co/edit/EqHZiZ3s2pRb7U5hmkEg?p=preview), it's working. What i think is happening is that when you call `loadIntoLocation` the `#content` is not there yet — Abdulrahman Alsoghayer, Apr 05 '16 at 11:29

score 2 · Accepted Answer · edited May 23 '17 at 11:54

To work around the ngFor issue you could create a wrapper element that does the actual dcl.loadIntoLocation()

This wrapper component is added for each notification and gets the comonent passed that it then adds inside itself.

@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  constructor(private containerRef:ViewContainerRef, private dcl:DynamicComponentLoader) {}
  @Input() component;

  ngOnChanges() {
    if(this.cmpRef) {
      throw 'currently changing type after the component was added is not supported'
    }
    this.dcl.loadNextToLocation(this.component, this.containerRef).then((cmpRef) => {
      this.cmpRef = cmpRef;
    });
  }
}

@Component({
  selector: 'core-comp',
  directives: [DclWrapper],
  template: `
  <h2>Tabs</h2>
  <div *ngFor="let notification of notifications">
    <dcl-wrapper [component]="notification"></dcl-wrapper>
  </div>
`
})
export class NotificationsComponent {
  public notifications: string[] = [];
  ...
}

Like also explained in Angular 2 dynamic tabs with user-click chosen components

What does `this.cmpRef = cmpRef` actually do? Like I know what it does but why do I need it? — Chrillewoodz, Apr 05 '16 at 12:11
This is to store the reference to the created component, in order to be able to remove it with `this.cmpRef.dispose()` (if I remember the method name correctly). — Günter Zöchbauer, Apr 05 '16 at 12:15
Hmm ok. Well it does solve the issue that I had so I'll accept the answer. Thanks :) — Chrillewoodz, Apr 05 '16 at 12:27

Unable to find variable inside *ngFor in Angular 2

1 Answers1