SetInput en Angular

mezagini

Daniel Mezagini

Posted on May 14, 2022

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
💖 💪 🙅 🚩
mezagini
Daniel Mezagini

Posted on May 14, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related