Episode 12 | Angular @ViewChild and @ViewChildren

Get reference of the template inside your component class using ViewChild or ViewChildren to change the behavior and appearance of the element. Watch is this tutorial for more details.

[@amolmali3583]

Hi Saikat.. Nice tutorial..For first few mins, I was under impression that tutorial going too slow but you are good at explaining things. I enjoyed it and received what I was looking for..Looking for more videos from you...
Thank you so much, Keep it up..:)

[@SaikatsTutorial]

Thanks Amol.

[@prasadkorrapati1638]

Very nice explanation. Many thanks.

[@SaikatsTutorial]

Glad it was helpful!

[@amrutterdal5077]

Good Tutorial Covered the concept and explained nicely. Best video for Understanding ViewChild and viewChildren.

[@ashifali2817]

Simple and easy to clear the viewchild. Thanks dear

[@ramachandrapadhi4459]

Thanks it's help for me, & waiting for next videos

[@yassinerassy6840]

nice way and a suuper exemples you are good at explaining things i realy enjoyed it !!

[@DineshYadav-hz1ne]

Nicely Explained

[@krishnachandrasharma1321]

Awesome man. I loved it

[@thamizharasanr4386]

really nice video to understand vc vch , thank you so much

[@havefun5519]

Really cool tut~ More real-world app practice for the ViewChild, ViewChildren examples more welcome.

[@indrasisdatta7029]

Very simple and to the point explanation with proper explanation! Keep up the good work, buddy! 😃😊

[@gender121]

Really...NIce Tutorial

[@onlynaveen]

Sir Great!!!, after use this visual, atleat I'm able to work on @ViewChild/Children, ElementRef/TemplateRef/NativeElement etc. Very clear to understand, I appreciate your topic, Again Thanks a Lot.

[@SaikatsTutorial]

Many thanks

[@TT-ud5gf]

NabKishore Barik Please share the usages as why you need to use @ViewChild/Children, ElementRef/TemplateRef/NativeElement etc

[@anandr8028]

Great brother ur awesome 😊👌

[@MrB_eastt]

Amazing view

[@musings2134]

This is goooood!!! I am real stingy with compliments. So, if I say this is good (with multiple 'O's ) it mean your tutorial is really good! Thank you for making this Saikat.

[@SaikatsTutorial]

Thanks bro

[@gender121]

Nice Tutorial

[@gender121]

A very very Good tutorial..

[@SaikatsTutorial]

Thanks

[@hosamhemaily4817]

really nice Sailkat

[@joekern]

I like how in the last 30 seconds you can hear the clock ticking in the background as the time displayed updates

[@SaikatsTutorial]

😆

[@doblerbr]

Best explanation so far, thank you so much!

[@y.haritha1219]

You uploaded view child and children in that you show on latest but updated not shown show that one also

[@namahshivaya9753]

Thanx man.It helped a lot.

[@brijeshmishra9893]

Very helpful

[@robertkylethomas173]

Thanks brother

[@shubhamarora547]

Sir please make more videos on theme material design thanks

[@RaviTejaKoneru]

Hi Saikat, Thanks for your tutorials .. Could Please explain few more concepts like Dynamic Component Loading, Lazy Loading and HTTP interceptor

[@SaikatsTutorial]

Sure Ravi. I have plan for next video tutorial on moduler design practice and lazy loading, but unable to complete due to huge work pressure. For sure I will upload tutorial this month.

[@saianusha2818]

@@SaikatsTutorial please it will be really helpful if u do those concepts..

[@DANIELRICHSON]

Hi Saikat, we have dynamic tabs, in each tab we have s embedded and we have the hidden form in angular to post data to ...if I use ViewChild or ViewChildren I m getting only current tab form data only by using nativeelement. But when it gets submitted it is getting posted to first tab only..Help on this item urgently

[@arijitchakrabarty1552]

Hi saikat. i'm facing an issue in angular 7. A little help would be highly appreciated. Here's my problem :
I want to display a component independently, when that component is called, without showing the root component(in my case, the app.component.html). What is the way to do that ?
thanks a lot :)

[@SaikatsTutorial]

Hi, I need to understand the exact use case. But root component must be displayed. Though bootstrap function is able to take multiple root components.

[@arijitchakrabarty1552]

​@@SaikatsTutorial Thanks for the reply. I solved the problem, though. I, basically had to render a component independently. But due to some restrictions, I was facing some problems. It's fixed now :D
Thanks again.

[@muhdhanafiyakub6678]

Hi, i have a question .. How do i manipulate the dom within the *ngIf directive using the viewchild... i tried and got nativeElement undefined .. Is there a way i can detect if a certain dom had been rendered after ngOnInit so that i can fire up a method once it is rendered, because some of my dom will only rendered after a data is received by backend (observable) ... Thank you

[@SaikatsTutorial]

You need to use ngAfterViewInit hook instead of ngOnInit

[@sanjuk3185]

I was trying to add two numbers in angular its working fine when i use button but i want to perform addition on keyup and the sum should be passed to child component without using any button or click event through function in app.component.ts
Please tell how to do this. Thanks in Advance..

[@1004robinson]

Using angular 4.1
In .html file: ,
In .ts file
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@ViewChild('benchBotTab') benchBotTab: ElementRef;
ngAfterViewInit() {
console.log(`MyViewChild: ${this.benchBotTab.nativeElement}`);
}
but I'm getting an error like
Runtime Error
Uncaught (in promise): TypeError: this.benchBotTab is undefined

[@younas61805]

it's not Valo it is Value. ;)

[@khanhnam99]

pls github this video source code