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

Published: 22 September 2023
on channel: Brian Treese
411
16

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.

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

👕 Funny Angular tees, hoodies, stickers, mugs and more! (https://devdrip.creator-spring.com)

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

🔗 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


Watch video Selecting child elements, components, and directives... the Angular way online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 22 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 41 once and liked it 1 people.