viewchild angular syntax

1      
2        content_copy
3      
4      import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';
5
6@Directive({selector: 'child-directive'})
7class ChildDirective {
8}
9
10@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
11class SomeCmp implements AfterViewInit {
12  @ViewChild(ChildDirective) child!: ChildDirective;
13
14  ngAfterViewInit() {
15    // child is set
16  }
17}
18    

1      
2        content_copy
3      
4      import {Component, Directive, Input, ViewChild} from '@angular/core';
5
6@Directive({selector: 'pane'})
7export class Pane {
8  @Input() id!: string;
9}
10
11@Component({
12  selector: 'example-app',
13  template: `
14    <pane id="1" *ngIf="shouldShow"></pane>
15    <pane id="2" *ngIf="!shouldShow"></pane>
16
17    <button (click)="toggle()">Toggle</button>
18
19    <div>Selected: {{selectedPane}}</div>
20  `,
21})
22export class ViewChildComp {
23  @ViewChild(Pane)
24  set pane(v: Pane) {
25    setTimeout(() => {
26      this.selectedPane = v.id;
27    }, 0);
28  }
29  selectedPane: string = '';
30  shouldShow = true;
31  toggle() {
32    this.shouldShow = !this.shouldShow;
33  }
34}
35