Angular @ViewChild Examples

01.html

<h2>Choose Brand Colors:</h2>

<color-sample [color]="primary" #primaryColorSample>
</color-sample>

<mat-input-container>
  <mat-label>Primary Color</mat-label>
  <input matInput #primaryInput [(colorPicker)]="primary" [(ngModel)]="primary"/>
</mat-input-container>

02.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  .....

  @ViewChild(ColorSampleComponent)
  primarySampleComponent: ColorSampleComponent;

  .....
}

03.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements  AfterViewInit {
  .....
    
  @ViewChild(ColorSampleComponent)
  primarySampleComponent: ColorSampleComponent;

  ngAfterViewInit() {
    console.log('Values on ngAfterViewInit():');
    console.log("primaryColorSample:", this.primarySampleComponent);
  }  

  .....
}

04.ts

@Component({
  selector: 'color-sample',
  template: `
    <div class="color-sample mat-elevation-z3" 
         [style.background-color]="color">
      <mat-icon>palette</mat-icon>
    </div>
  `
})
export class ColorSampleComponent {
    @Input() color;
}

06.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements  AfterViewInit {
  ....
  
  @ViewChild(MatIcon)
  matIcon: MatIcon;

  ngAfterViewInit() {
    console.log('Values on ngAfterViewInit():');
    console.log("matIcon:", this.matIcon);
  }

   ....
}

07.html

<h2 #title>Choose Brand Colors:</h2>
... the rest of the AppComponent template ...

08.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements  AfterViewInit {
  .....
  
  @ViewChild('title')
  title: ElementRef;

  ngAfterViewInit() {
    console.log('Values on ngAfterViewInit():');
    console.log("title:", this.title.nativeElement);
  }

  .....
}

09.html

<h2>Choose Brand Colors:</h2>
<color-sample
  [color]="primary"
  #primaryColorSample
  (click)="open()">
</color-sample>
  ... the rest of the AppComponent template ...

10.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements  AfterViewInit {
   ....
   
  @ViewChild('primaryColorSample')
  sample: ColorSampleComponent;

  ngAfterViewInit() {
    console.log('Values on ngAfterViewInit():');
    console.log("sample:", this.sample);
  }

   ....
}

11.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements  AfterViewInit {
   ....
   
  @ViewChild('primaryColorSample', {read: ElementRef})
  sample: ElementRef;

  ngAfterViewInit() {
    console.log('Values on ngAfterViewInit():');
    console.log("sample:", this.sample.nativeElement);
  }

  ....
}

12.ts

<h2 #title>Choose Brand Colors:</h2>

<color-sample [color]="primary" #primaryColorSample (click)="primaryInput.openDialog()">
</color-sample>

<mat-input-container>
  <mat-label>Primary Color</mat-label>
  <input matInput #primaryInput [(colorPicker)]="primary" [(ngModel)]="primary"/>
</mat-input-container>

14.html

<h2 #title>Choose Brand Colors:</h2>

<color-sample [color]="primary" #primaryColorSample (click)="openColorPicker()">
</color-sample>

<mat-input-container>
  <mat-label>Primary Color</mat-label>
  <input matInput #primaryInput [(colorPicker)]="primary" [(ngModel)]="primary"/>
</mat-input-container>

15.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  primary = '#1976d2';

  @ViewChild('primaryInput', {read: ColorPickerDirective})
  colorPicker: ColorPickerDirective;

  openColorPicker() {
    this.colorPicker.openDialog();
  }
}