In-depth analysis of ViewChild, ElementRef and ViewChildren in Angular

Angular @ViewChild is one of the easiest but same time difficult decorators. You can learn it while doing the coding. @ViewChild is one of the most commonly used decorators. The decorator offers loads of functionality. In this article, we will deep dive into @ViewChild, ElementRef,ViewChildren decorators. We will see examples of how to use it and discuss real-life problems.

What is @ViewChild decorator

@ViewChild is a property decorator. It provides a powerful way to access child elements and properties. When we want to access child component element, form property i.e. form dirty, touched, etc, and directive in the parent component. @ViewChild is a very easy way to access the child elements.

@ViewChild Metadata

• Selector: Directive name, If the same child control is used more than once on the page. It is a very useful property.
• Static: This is a mandatory field in the newer Angular version. The default property is false. Static data is false by default in the Angular 9 version. Use static:true when you want to access child elements in ngOnInit.

@ViewChild decorator and ngAfterViewInit