Selecting child elements, components, and directives... the Angular way

In Angular, things are done differently. For example, when we need to access an HTML element programmatically from JavaScript, we shouldn’t use DOM selection tools like document.queryselector(). Instead, we should use the Angular @ViewChild decorator and a template reference variable. This is because of the way that Angular’s change detection works. And, if we don’t use the tools that Angular provides, it’s possible that things won’t work as expected. In this video I’m going to show you how to do this.

First we’ll access a child HTML element from our component TypeScript with the @ViewChild decorator and a template reference variable. Then, we’ll look at how we can access a child component or directive using the same @ViewChild decorator. After that we’ll learn how to access a nested child component or directive within projected content using Angular's @ContentChild decorator this time. Alright, let’s get to it.

------------------------------------------------------------------------------

🔗 Demo Links:
@ViewChild and HTML Element: https://stackblitz.com/edit/stackblit...
@ViewChild and Component: https://stackblitz.com/edit/stackblit...
@ContentChild and Component: https://stackblitz.com/edit/stackblit...

------------------------------------------------------------------------------

📖 Chapters:
0:00 – Introduction
1:04 – Angular's View vs. Content Concept
1:31 – Accessing an HTML Element with @ViewChild and a Template Reference Variable
3:49 – Accessing a Child Component in the Template with @ViewChild
5:35 – Accessing a Child Component within Projected Content with @ContentChild

------------------------------------------------------------------------------

#angular #angulartutorial #angularcourse