@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.

[@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!

[@QuangVu-c9v]

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

[@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.

[@leninnani5222]

Nice videos, thank you

[@maksat-mad]

Very clear explanation, thank you!

[@viniciusmachadorodrigues1724]

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

[@stevecriddle]

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

[@raviverma2431]

Thank you so much Its really very much helpful 🎉🎉

[@dimon.digital]

Thank you very much! 👋

[@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

[@sivaprasad10410]

in which scenario we can use @ViewChild decorator

[@yurapekach7550]

Thank you so much!

[@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

[@MultiWarrr]

How it worked without declaring var inside afterviewinit method?

[@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()}}

[@datarsairaghav2053]

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

[@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.

[@ciciiig]

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

[@ahamed7794]

Got error object is possibly undefined

[@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.

[@jayakumar2927]

share github code

[@techsharp257]

@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😬

[@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