Transmissão de dados para o setter de um componente filho no Angular

É possível fazer com que os dados do componente pai sejam passados para o setter de uma propriedade privada. Vamos ver um exemplo. Suponha que temos uma propriedade privada com setter e getter:

app/user/user.component.tsclass UserComponent {
  private _name: string = '';
  
  set name(name: string) {
    if (name.length < 3) {
      this._name = name;
    } else {
      console.log('error');
    }
  }
  
  get age() {
    return this._userAge;
  }
}

Para o exemplo, vamos criar um setter para a idade, no qual implementaremos uma verificação dos dados transmitidos. Também vamos criar um getter para exibir as propriedades do usuário:

app/user/user.component.tsclass UserComponent {
  private _name: string = '';
  
  @Input()
  set name(name: string) {
    if (name.length > 3) {
      this._name = name;
    } else {
      console.log('error');
    }
  }
  
  get name() {
    return this._name;
  }
}

Agora vamos transmitir dados do componente pai para o filho:

app/app.component.html<user-data name="john"></user-data>

E no componente filho, exibiremos o nome transmitido na tela:

app/user/user.component.html<p>{{ name }}</p>