Angular Components 04: components @viewchild reference

@viewchild is a simple decorator and it’s very useful for access the html element.

Previous Blog
Angular Component 03 — output decorator.

Back to Lesson

Hang on there, it’s just a simple topic.
here is the full project link for reference
https://stackblitz.com/edit/angular-ivy-viewchild-components

In app.component.html file we write a template reference, followed by #__referenceName__ in our case #viewChildReference

app.component.html

In app.component.ts file

app.component.ts

First we should import ViewChild from ‘@angular/core’

inside declaration part of the code (top of the class AppComponent). we mention

@ViewChild(‘__referenceName__”) __anyName__;
(in our case see the image, app.component.ts.

Wrote a function where we can log the viewchild reference ie (getLocalReference)

Next Blog
Lesson 5 : Components : ng-content

— — — — — — — — — — — End of Lecture — — — — — — — — — — — —

Full Blog of angular concepts (all lessons)
https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b