Understanding @ViewChild and @ViewChildren


In this article, we are looking out the @ViewChild and @ViewChildren decorator. So we will learn these two decorators. In Angular 6 you can find the @ViewChild and @ViewChildren decorators in the API. You can use ViewChild to get the first element or the directive matching the selector from the view DOM. So when the DOM changes and the ViewChild match the element then the property will be updated.

@ViewChildren is similar to the @ViewChild. we specify the @ symbol at the start of the decorator so you will know that these are the decorators. Well, What about the @ViewChildren. You can use ViewChildren to get the Query list of elements or directive from the view DOM. So whenever the child list is added or remove or moved then the query list will be updated.

Now let’s jump into the code and Understand what we are creating.

So first we will create an angular application using CLI. So to create the new application we will put a command that creates the application. we name our application my-child.

How to create angular 6 application

After creating the application go into the application directory.

app.component.html

In this file, we will put some code to create the design.

In this code, you will see we created a heading tag and add id title this id is work like a selector.

Understanding the above code first

  • So first we will create an h1 heading level tag and insert id title. we did not create an id for CSS that is why we will just create the id using # and specify the name of the id like this #title
  • After that, we will create three paragraph which demonstrates the children. So we will create three paragraph and specify the same id for that paragraph. The id is to identify the element. So to identify the element we will use the id and the name of the id.
  • In the paragraph, we will put some demo text. we are using the lorem demo text here you can use your own text also.

app.component.ts

In the app.component.ts file, we will insert some code for @ViewChild and @ViewChildren.

So In this file, we just put some code I will explain what we have done here.

  • In the first line where the program was started, we just put the import statement. In the import statement, we import the module so here we are importing ViewChildren, ElementRef, ViewChild, AfterViewInit module.
  • We will create a @Viewchild and in the parameter, we specify the title text. Make sure the parameter text is exactly the same text which you had provided as an h1 id. So in the parameter, we specify the id and create a variable of type ElementRef. So the ElementRef is the reference to that element.
  • After that, we will create a @ViewChildren decorator and specify the paragraph id. So here we will specify three ids paragaph1, paragraph2, and paragraph3. and create a variable of the @ViewChildren paragraph. So the variable contents the child elements.
  • Then we will create a note string variable.
    • After this, we will create a ngAfterViewInit() function which runs when page load. In this function, on we select the title id using the variable. Using nativeElement we will select the element and specify the text.
    • Then we will create a setTimeout function. In this function, we specify the note variable and specify text and variable of the paragraph. For the paragraph, we specify the length method to get the length of the Children elements.

Now just run your app using this command.

Serve angular 6 application

That’s it.

Now you will see the render screen. On this screen, you can find the title text and at the end of the design, you can find the paragraph count numbers that represent the number of Childres are used.

The design and the code were simple and straightforward you just need to practice it at home and implement it with your own ideas.

That is all for this article,

Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *