#31 ViewChild() in Angular | Angular Component & Directives | A Complete Angular Course

In this lecture you will learn about @ViewChild() in Angular and how to use it on DOM elements & Components. The @ViewChild() is a decorator which allows us to access a reference to a DOM element, a component or a directive in the component class.

[akshaychavan]

Thanks for uploading the series. I have started to learn angular from the beginning. I hope your series will benifit me.

[jvilasasd]

I have 10 years of experience in UI development. It is an Awesome tutorial for all thanks

[benkthomasniravathu]

10:11 for click to view product starts

[rajnishKumar-mzfv]

Sir please complete the node js course

[ayushisingh]

how do we know when to use ViewChild to pass data from child to parent and when to use the old way using @output ? and when to use template refernece or ViewChild

[chakirfri]

code for size :
<diV style="margin-top: 20px">
<span *ngFor="let size of product.size">{{size}}</span>
</diV>

[SirFrancisFoley]

One of things that is cracking me up is get the shoes to span across the page, my shoes are listed one under another, I have tried <span> in lot of different places but I cannot find the right spot to include it. Any help will be gratefully accepted.

[tomail]

I ended from the tasks, but the code of color does not work for me:
code of the size is working:
<div *ngFor="let prod of product.size;">
<span >{{prod}}</span>
</div>

I hope to help for this,
code of the color is not working:
<div style="margin-top: 20px" *ngFor="let prod of product.color" [style.color]="prod.color"
<span {{prod}} ></span>
</div>
thank you.

[Soty]

A very good course so far. Unfortunately, this is the first chapter where the use case is not really clear. The problems can be solved much easier with pure data binding and ViewChild seems slightly exaggerated here.

<product-detail

I would have liked to see more detail on when to use ViewChild versus data binding and when not. Otherwise it was very understandable.

[karvan]

It is throwing error:
Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.

[chakirfri]

code for color :
<diV style="margin-top: 20px;">
<span *ngFor="let color of product.color"
</diV>

[gnbdmqn]

I think there is a bug here. It works as like template reference variable.
Because when click close button of modal i make undefined the selectedProduct property. the modal close imediately because the whole product detail div and overaly div has condition to show only selectedProduct with value.this works fine when use template variable but in @ViewChild() first time click on product it shows the modal and after closing the modal when click on product again it does not show modal.

[sangireddysukanya]

Here even after implementing ngoninit life cycle hook I am getting error like can't read properties of undefined. What can be done

[RodRavenpictures]

15:00 > ok, so you use the component's class name, not the selector, right? Cause the selector is usually different by default.

[rajanrao]

please sir upload the video contineuosly

[Manojkumar-vlhi]

hi sir, can you please share a project file upto this lecture, to continue the flow with you

[arammah]

static by default set to false not true.