ViewChild

Sirve para acceder a un componente, a un elemento del DOM desde otro componente, o a una directiva.

@ViewChild(selector) nombreDePropiedad: TipoDePropiedad;

Por ejemplo:

@ViewChild (HijoComponent, {static: true}) hijo: HijoComponent;

 

Donde  HijoComponent es el selector o propiedad del componente hijo y con la variable hijo accedemos a los metodos y las propiedades del hijoComponent.

Si vamos a accerder a ViewChild en ngOnInit ponemos { static: true } y { static: false } para acceder en ngAfterViewInit o si usamos una directiva estructural (*ngIf etc.) sobre nuestra plantilla.

 

Por ejemplo

  @ViewChild (HijoComponent, {static: true}) hijo: HijoComponent;

Vamos hacer referencia a esa clase mediante el nombre hijo y esa propiedad es de tipo HijoComponent

 

Comunicación de componentes a traves de ViewChild

Vamos a crear un componente hijo el cual tiene una variable llamada valorNumero y su componente padre la va a modificar.

Para ello creamos un nuevo componente llamado hijo:

ng generate component hijo 

hijo.component.ts: 

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-hijo',

  templateUrl: './hijo.component.html',

  styleUrls: ['./hijo.component.css']

})

export class HijoComponent implements OnInit {

  valorNumero = 5;

  constructor() { }

 

  ngOnInit() {

  }

  cambiarValor(nuevoValor) {

    this.valorNumero = nuevoValor;

  }

}

Donde creamos una nueva variable llamada valorNumero con el valor 5 y un metodo llamado cambiarValor que tenga un parametro llamado nuevoValor.

 

hijo.component.html:

El valor del numero es:

<p>{{valorNumero}}</p>

 

En app.component.ts hacemos uso del decorador:

@ViewChild (HijoComponent, {static: true}) hijo: HijoComponent;

Y creamos una funcion llamada cambiarNumero donde en this.hijo llamamos al metodo cambiarValor(25) definido en su hijo.

 

app.component.ts:

import { Component, OnInit, ViewChild} from '@angular/core';

import { HijoComponent } from '../app/hijo/hijo.component';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements  OnInit {

  @ViewChild (HijoComponent, {static: true}) hijo: HijoComponent;

 

  constructor( ) {

 

   }

 

  ngOnInit() {

 

   }

   cambiarValorNumero() {

     this.hijo.cambiarValor(23);

   }

 }

 

app.component.html:

<app-hijo></app-hijo>

<button (click)="cambiarValorNumero()">Cambiar numero</button>

 

Cuando hagamos click en Cambiar Numero llamaremos al metodo cambiarNumero del modulo del componente.

 

Manejo del DOM de HTML con  ViewChild

 

Vamos a cambiar el mensaje de Bienvenido por Has pulsado el boton mediante el uso de ViewChild.

Creamos un mensaje llamado Bienvenido y se lo asignamos al selector ID con valor #nombre, tambien creamos un boton que llame a un metodo llamado cambiarValor();

app.components.html:

<p #nombre >Bienvenido</p>

<button (click)="cambiarValor()">Cambiar valor</button>

En app.components importamos ElementRef la clase para manejar los elementos del DOM.

Despues hacemos uso del decorador donde ponemos el valor dado en la plantilla #nombre y creamos una variable llamada MiNombre de tipo ElementRef

  @ViewChild('nombre', { static: true }) MiNombre: ElementRef;

Finalmente creamos el metodo de cambiarValor():

cambiarValor() {

 this.MiNombre.nativeElement.innerText = 'Has pulsado el boton';

}

app.components.ts:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  title = 'Angular8';

 

  constructor() {

  }

  @ViewChild('nombre', { static: true }) MiNombre: ElementRef;

 

  ngOnInit() {

  }

  cambiarValor() {

    this.MiNombre.nativeElement.innerText = 'Has pulsado el boton';

  }

}

Directivas con  ViewChild

 

Con el decorador ViewChild vamos a acceder a una directiva, en el siguiente ejemplo vamos a acceder al nombre que tiene, para ello vamos a usar el decorador  ViewChild

Creamos una nueva directiva y creamos la variable nombre = 'Antiguo'

mi-directiva.directive.ts:

import { Directive, ElementRef} from '@angular/core';

@Directive({

  selector: '[appMiDirectiva]'

})

export class MiDirectivaDirective {

  nombre = 'Antiguo';

  constructor(Element: ElementRef) {

    Element.nativeElement.innerText = this.nombre;

    Element.nativeElement.style.backgroundColor = 'yellow';

  }

}

En App.component.ts definimos el viewChild de la siguiente manera:

 

App.component.ts:

import { Component, ViewChild } from '@angular/core';

import { MiDirectivaDirective } from './mi-directiva.directive';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  nombre: string;

@ViewChild(MiDirectivaDirective, { static: false })

 

 set appMiDirectiva(directiva: MiDirectivaDirective) {

    this.nombre = directiva.nombre;

 }

}

 

App.component.html:

<p appMiDirectiva> directiva</p>

<p>El valor de la variable nombre en la directiva es: {{this.nombre}}</p>