Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Overview of ViewChild & ViewChildren Decorator in Angular 4 with Example

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.25k
    Comment on it

    An angular application is made up of components. A component view children can be defined as elements which are used within the component template(view). These elements can be directives, child components or name of template variable. @ViewChild and @ViewChildren decorator is used for referencing elements from the components view DOM. So, in this tutorial, I am providing you "An Overview of ViewChild & ViewChildren Decorator in Angular 4 with Example".

     

     

    @ViewChild Decorator

    Example:  @ViewChild(StudentComponent) studentViewChild: StudentComponent;

    It means search inside parent component template(view) for this child component and creates a property studentViewChild and after searching child component bind to this property. Thus property studentViewChild is storing the reference of child component(StudentComponent). If more than one StudentComponent are found inside parent component view then @ViewChild decorator only returns the first one it finds.


    Example :-

     

    Parent Component

    import { Component,ViewChild,AfterViewInit } from '@angular/core';
    import { StudentComponent } from './student/student.component';
    
    @Component({
        selector: 'app-root',
        template: '<h1 #header>Parent Component</h1><app-student></app-student><app-student studenttype="Science Student"></app-student><app-student studenttype="Commerce Student"></app-student>'
    })
    export class AppComponent implements AfterViewInit {
      @ViewChild("header") header
      @ViewChild(StudentComponent) studentViewChild: StudentComponent
      
      ngAfterViewInit() {											//access view members only after the view is initially rendered
        console.log(this.header);
        console.log(this.studentViewChild);
      }
    } 

     

    Student Component

    import { Component,Input } from '@angular/core';
    
    @Component({
      selector: 'app-student',
      template: `<h1>{{studenttype}}</h1>`,
    })
    export class StudentComponent {
      @Input() studenttype: string = "Humanities Student";
    }

     

    The following output is produced in console when application runs :-

     

     

    Explanation: When the parameter passed to @ViewChild is of type component/directive then the value returned is component/directive instance but in case of the name of a template variable as a parameter then the value returned is a reference to the native element.  In StudentComponent @Input variable is set whose default value is "Humanities Student" otherwise the value will be one passed from the parent component. Only one reference to StudentComponent is returned because @ViewChild is only capable of returning the first element found against the searched element.

     

     

    @ViewChildren Decorator

     

    @ViewChild only returns the first element it finds corresponding to search element therefore not useful in case of multiple elements found corresponding to search element. @ViewChildren is used to get elements or directives Querylist from view DOM. Whenever parent component adds, removes or moves child element, Querylist will be automatically updated and will provide new value.

     

    Example :-

     

    Parent Component

    import { Component,ViewChildren,AfterViewInit,QueryList } from '@angular/core';
    import { StudentComponent } from './student/student.component';
    
    @Component({
        selector: 'app-root',
        template: '<app-student></app-student><app-student studenttype="Science Student"></app-student><app-student studenttype="Commerce Student"></app-student>'
    })
    export class AppComponent implements AfterViewInit {
      @ViewChildren(StudentComponent) studentViewChild: QueryList<StudentComponent>
      
      ngAfterViewInit() {											
        let students: StudentComponent[] = this.studentViewChild.toArray(); 
        console.log(students);
      }
    } 
    

     

    StudentComponent remains same

     

    QueryList is the return type of @ViewChildren storing a list of items. The following output is produced in console when application runs:

     

    Overview of ViewChild & ViewChildren Decorator in Angular 4 with Example

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: