DEV Community

Cover image for SetInput en Angular
Daniel Mezagini
Daniel Mezagini

Posted on

SetInput en Angular

Cuando queremos ejecutar cierta acción al recibir cierta propiedad en el componente, he utilizado el ciclo de vida OnChanges. Pero esto supone evaluar todos y cada uno de los cambios que suceden y tener que verificar si el cambio entrante es el que estamos esperando.

Este método corre cada que un Input() recibe información del componente padre.

Ej. Espero un objeto tipo Persona. Pero no quiero que se evalúe cada cambio. Sólo saber cuando se hace el cambio al recibir person.

@Input() person: Person = new Person('', '', 0, 0, 0); 
@Input() year: number = 0;
@Input() month: number = 0;
@Input() lastName: string = '';
Enter fullscreen mode Exit fullscreen mode

Esto se soluciona con SetInput. Requiere separar el person del input().

person: Person = new Person('', '', 0, 0, 0); 
Enter fullscreen mode Exit fullscreen mode

Al Input() se le agrega el set de los setters. Para que siempre que llegue información al Input() se ejecute el método set. De esa manera se mantiene controlado el cambio de person.

person: Person = new Person('', '', 0, 0, 0);

@Input()
  set changePerson(newPerson: Person) {
    this.person = newPerson;
  }
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ezequielga52765 profile image
Ezequiel Gallardo

Gracias! Vale la pena añadir que si queremos implementar el getter, el nombre de la función debe ser idéntico y quedaría tal que:

@Input()
get changePerson(): Person {
return this.person;
}