⊗jsagPmCMCSP 66 of 97 menu

Transmission de données au setter d'un composant enfant dans Angular

Il est possible de faire en sorte que les données du composant parent arrivent dans le setter d'une propriété privée. Regardons un exemple. Supposons que nous ayons une propriété privée avec un setter et un getter :

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

Pour l'exemple, créons un setter pour l'âge, dans lequel nous implémenterons une validation des données transmises. Créons également un getter pour afficher les propriétés de l'utilisateur :

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

Maintenant, transmettons les données du composant parent au composant enfant :

<user-data name="john"></user-data>

Et dans le composant enfant, affichons le nom transmis à l'écran :

<p>{{ name }}</p>

Expliquez pourquoi la propriété privée _name commence par un symbole de soulignement.

Implémentez les setters et getters pour le nom du produit et son prix, qui seront transmis depuis le composant parent.

azbydeenesfrkakkptruuz