Пренесување на податоци во сетер на детски компонент во Angular

Може да се направи така што податоците од родителскиот компонент да пристигнуваат во сетер на приватно својство. Ајде да погледнеме на пример. Нека имаме приватно својство со сетер и гетер:

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;
  }
}

За пример ајде да направиме сетер за возраста, во кој ќе имплементираме проверка на пренесените податоци. Исто така ајде да направиме гетер за приказ на својствата на корисникот:

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;
  }
}

Сега ајде да ги пренесеме податоците од родителскиот компонент во детскиот:

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

А во детскиот компонент ајде да го прикажеме пренесеното име на екранот:

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