Как использовать ViewChild для динамически создаваемых едементов в Angular2+?

Question

[mr_blond97]

В темплейте компоненты два html елемента, первый выводится при инициализации компоненты, другой выводится по условию *ngIf="isDivShown".

let { Component, NgModule, Input, ViewChild } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	<div #myelement1>Element_1</div>
  	<div #myelement2 *ngIf="isDivShown">Element_2</div>
    <button (click)="changeObject()">Change the objects</button>
  `,
})
class HomeComponent {
		@ViewChild('myelement1') private el1: ElementRef;
		@ViewChild('myelement2') private el2: ElementRef;
    isDivShown = false;
    
    changeObject() {
      this.isDivShown = true;
      this.el1.nativeElement.className = 'myCSSclass_1';
      this.el2.nativeElement.className = 'myCSSclass_2';
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);

isDivShown при инициализации ==  false. При вызове метода changeObject() isDivShown приравнивается true и после идет обращение к this.el2.nativeElement.className. На этом шаге возникает ошибка:

Cannot read property 'nativeElement' of undefined

Пример на jsfiddle.

Как использовать ViewChild для динамически создаваемых едементов в Angular2+?

Answer 1

[Антон Швец]

Так вы меняете переменную, а потом сразу же ожидаете что появится el2, конечно же его нет, дайте Ангуляру время сделать свою работу.

public changeObject() {
    this.isDivShown = true;
    setTimeout(() => this.changeClasses());
  }

  private changeClasses() {
    this.el1.nativeElement.className = 'myCSSclass_1';
    this.el2.nativeElement.className = 'myCSSclass_2';
  }

ну и конечно же, правильно делать это совсем не так, а

<div [class.myCSSclass_1]="isDivShown">Element_1</div>
<div *ngIf="isDivShown" [class.myCSSclass_2]="isDivShown">Element_2</div>
<button (click)="isDivShown = true">Change the objects</button>

без обращений к хмтл-элементам в методах

p.s. в вашем примере Angular4, уже как бы не актуально, тот же ViewChild сейчас работает немного по другому.