@ViewChild in Angular | Data Binding | Angular 12+

In this lecture, you are going to learn about @ViewChild decorator in angular. The @ViewChild decorator in angular is used to access an HTML element, a component or a directive in the component class.
Also remember that @ViewChild decorator returns the first matching element from the DOM and assign it to the property which we have decorated it with @ViewChild.
Let's understand @ViewChild decorator with an example.

[@QuangVu-c9v]

Thank you, Sir! You're one of the best teacher on RUclips!

[@Naldjei3396]

Awesome how I watch your videos to learn one thing and at the end I learnt a lot more. You're a great teacher. Thank you!

[@leninnani5222]

Nice videos, thank you

[@maksat-mad]

Very clear explanation, thank you!

[@dimon.digital]

Thank you very much! 👋

[@raviverma2431]

Thank you so much
Its really very much helpful 🎉🎉

[@nuadoixaxunuadoixaxu2182]

Will you please explain the difference about the use of viewchild vs @input@output... what is the advantages and disadvances over the other.

[@sourandbitter3062]

@ViewChild is to access child elements/components from the parent component.
@Input or @Output are to access data bindings in the child component that were set inside the parent component's template.

[@DD-vc7fq]

@@sourandbitter3062 That answer does not seem satisfactory to be honest.
I guess the main question is:
Why would you ever use @Output and EventEmitter when passing data from child component to parent component, when @ViewChild seems way more practical and does the same thing?

[@ameysaitavdekar4102]

ViewChild gives fullcontrol of DOM properties over a element , Component or directive while input and output are property decorators for a particular variable in component.Also @ViewChild does not triggers any Angular hooks while input and outpt triggers ngOnChange hook.

[@virajjoshi7569]

@ViewChild static property can you also explain that?
Thank You.

[@yurapekach7550]

Thank you so much!

[@stevecriddle]

Why does sayHello() get called 4 times when the page displays?

[@viniciusmachadorodrigues1724]

instead of using viewchild static, we could use dependency injection right?

[@sivaprasad10410]

in which scenario we can use @ViewChild decorator

[@VladyslavHaidar]

Maybe, I don't get something, but it looks like if person was born on 27-th of October, 2001, he is not 21 y.o. yet - how it is explained with this method 'calculateAge()'
Just saying
Btw - content is very g00d - THANKS!

[@ashishkumarnath1259]

well the method only considers years , hence you get 2022-2001 = 21 years

[@Serialloserr]

How it worked without declaring var inside afterviewinit method?

[@user-gz8ub3fl6r]

I am getting this error when trying to access element.
Ts:
@ViewChild('', { static: false }) : ElementRef;
But i am getting this error:
Property '' has no initializer and is not definitely assigned in the constructor.
Html:
.
Can you please help me on this?

[@sourandbitter3062]

You probably need to add an exclamation mark after the property name . This is called the non-null assertion operator and tells TypeScript that the property will be set at runtime even though TypeScript cannot detect it at compile time:
@ViewChild('', { static: false })
!: ElementRef; //

[@siddharthakundarapu9487]

hi i have got error in ts file property @ViewChild(DemoComponent, {static: true}) demoComp: DemoComponent; ->demoComp

[@swathykrishna9122]

Why statement in sayHello(), logged twice in console?

[@shinocs7901]

did you get answer for this?

[@viniciusmachadorodrigues1724]

@@shinocs7901 at least in react, it happens because its on development mode. In angular it may the the same reason.

[@datarsairaghav2053]

Property 'dateOfBirth' has no initializer and is not definitely assigned in the constructor.
11 @ViewChild('dobInput') dateOfBirth: ElementRef;
28th video @ViewChild video

[@Q999Q-Q3Q]

The second method you described in the video: "Accessing child component in the parent component using ViewChild decorator" is not working anymore.

[@techie2903]

It works.

[@BrisLS1]

You could be having difficulty compiling. Try - @ViewChild(DemoComponent, {static :true}) demoComp : DemoComponent = {} as DemoComponent;

[@ravishsingh1112]

please share link of java script course
#procademy

[@datarsairaghav2053]

Property 'age' has no initializer and is not definitely assigned in the constructor.
12 @ViewChild('ageInput') age: ElementRef;
~~~

[@BrisLS1]

You can try - = {} as ElementRef; to get it to compile. I don't know why he does not have to initialize things. This may be a setting somewhere.

[@ahamed7794]

Got error object is possibly undefined

[@jayakumar2927]

share github code

[@SrinathJog]

here in your example if we delete even console giving error. It means not able to call function . Can you explain why it is like that ? what is the relation between and {{democomp.sayHello()}}

[@daniel49245]

if you are getting error try this:
@ViewChild("dobInput") dateOfBirth!: ElementRef;
@ViewChild("ageInput") age!: ElementRef;
and if you want more precise calculation of age:
calculateAge(){
let birthDate = new Date(this.dateOfBirth.nativeElement.value);
let currentDate = new Date();
let diffInMilliseconds = Math.abs(currentDate.getTime() - birthDate.getTime());
let diffInYears = diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25);
this.age.nativeElement.value = Math.floor(diffInYears);
}

[@darshuyazh]

thanks this worked for me

[@Chillvibes7i]

@ViewChild('dobInput') dateOfBirth: ElementRef;
@ViewChild('ageInput') age: ElementRef;
Error
Property 'dateOfBirth' has no initializer and is not definitely assigned in the constructor.
Property 'age' has no initializer and is not definitely assigned in the constructor.
I am using Angular 14.

[@benageandy8374]

change @ViewChild('dobInput') dateOfBirth: ElementRef to @ViewChild('dobInput') dateOfBirth!: ElementRef
@ViewChild('ageInput') age: ElementRef; to @ViewChild('ageInput') age!: ElementRef;

[@deepesttrouble1]

gotta add `!` like: dateOfBirth!

[@ahamed7794]

Got error : object is possibly undefined

[@morishwilson7360]

@ViewChild('dobInput') dateOfBirth!: ElementRef;
Try "!" after "dateOfBirth" and before ":"

[@vidhyaviswanath5441]

Same for me😬