#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.
ASP.NET Core GitHub Repo: github.com/man...
NODE JS Course GitHub Repo: github.com/man...
ANGULAR 16 Course GitHub Repo: github.com/man...

[@akshaychavan3597]

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

[@jvilas10asd1]

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

[@abdllahzayed6790]

welcome back 🙏 ❤

[@sona4612]

Awesome tutorial 🔥🔥🔥

[@rajnishKumar-mz8fv]

Sir please complete the node js course

[@mahmoudfawzy9901]

Just one thing you were wrong about is that "static" property is by default "false" not true. Other than that you did a good job.

[@benkthomasniravathu8136]

10:11 for click to view product starts

[@shakeelilyas7952]

i am completed the given tasks

[@jamaal00013]

Thank you❤

[@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 in lot of different places but I cannot find the right spot to include it. Any help will be gratefully accepted.

[@Clairvoyancerion]

I used bootstrap and created a div with class="container flex-wrap". In this case, each product will wrap around and create a grid layout.

[@Soty1989]

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.
I would have liked to see more detail on when to use ViewChild versus data binding and when not. Otherwise it was very understandable.

[@fadiazzam_]

I share the same opinion as you, and I took the same approach.

[@Clairvoyancerion]

Do you have any other possible use cases where ViewChild can be essential?

[@karthikshellikeri6189]

I think that the ViewChild will be used when you want to have communication between non related components

[@ItCoursesForAll]

Is this complete course for angular?

[@Mageshwaran_M]

When will do typescript video

[@ayushisingh6638]

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 :
{{size}}

[@rajanrao5170]

please sir upload the video contineuosly

[@Manojkumar-vl6hi]

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

[@RodRavenpictures]

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

[@RodRavenpictures]

Is it correct to say that this @ViewChild() is an alternative to @Output(), cause I think you can achieve the same using just a reference variable for product-list and an @Input() in the product-details. I do understando it seems more invasive than input and output, cause with viewChild you could easily overwrite any variable in the child.

[@tareksobhey2856]

where is the solution video ?

[@karvan101]

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

[@sangireddysukanya6812]

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

[@lobnakhalsi9558]

I had the same error :/

[@suleymanyalman8077]

in the tsconfig file make "strict": false,

[@AjayCoding]

❤

[@SalmanShafiq-y3q]

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.

[@SalmanShafiq-y3q]

like your, i need to refresh my browser to works again.

[@SalmanShafiq-y3q]

I found that after close modal the second times any change does not detect.

[@arammah]

static by default set to false not true.

[@artsentertainment8875]

Yes

[@chakirfri]

code for color :

[@NISARGMEWADA]

code for price :

Price Each Pair:
$
{{product.price}}

$
{{product.discountPrice}} (Inclusive of all taxes)

I am not getting the desired result.

[@divyap.p1991]

Thank you ❤❤❤❤