Angular 8 : interaction entre composant
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille
Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
[Link]@[Link]
12-13 Avril 2018 1 / 12
Plan
1 Introduction
2 Exemple avec @Input()
3 Exemple avec @Output()
12-13 Avril 2018 2 / 12
Introduction
Angular
Premières formes d’interaction
Une application Angular est composée de plusieurs composants
En utilisant des formulaires et des liens, on peut envoyer des
données d’un composant à un autre
12-13 Avril 2018 3 / 12
Introduction
Angular
Premières formes d’interaction
Une application Angular est composée de plusieurs composants
En utilisant des formulaires et des liens, on peut envoyer des
données d’un composant à un autre
Autre forme d’interaction
On peut ajouter le sélecteur d’un premier composant dans le
template d’un deuxième composant
on appelle le premier composant : composant fils
on appelle le deuxième composant : composant parent
En utilisant les décorateurs @Input() et @Output() les deux
composants peuvent échanger de données
12-13 Avril 2018 3 / 12
Introduction
Angular
Les décorateurs @Input() et @Output()
@Input() : permet à un composant fils de récupérer des
données de son composant parent
@Output() : permet à un composant parent de récupérer des
données de son composant enfant
12-13 Avril 2018 4 / 12
Exemple avec @Input()
Angular
Avant de commencer
Créons deux composants pere et fils
Définissions une route /pere pour le composant pere
12-13 Avril 2018 5 / 12
Exemple avec @Input()
Angular
Avant de commencer
Créons deux composants pere et fils
Définissions une route /pere pour le composant pere
Dans cet exemple
Chaque élément fils aura deux attributs ordre et
villeNaissance affichés dans le template
Le sélecteur du composant fils app-fils sera ajouté dans
[Link]
Le composant pere attribuera les valeurs aux deux attributs de la
classe [Link]
12-13 Avril 2018 5 / 12
Exemple avec @Input()
Angular
Le fichier [Link]
import { Component, OnInit, Input,} from ’@angular/core’;
@Component({
selector: ’app-fils’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
export class FilsComponent implements OnInit {
@Input() ordre: string;
@Input() villeNaissance: string;
constructor() { }
ngOnInit() { }
}
Le fichier [Link]
<li>
<h5> Je suis le {{ ordre }} fils et suis de {{ villeNaissance }} </h5>
</li>
12-13 Avril 2018 6 / 12
Exemple avec @Input()
Le fichier [Link]
import { Component, OnInit } from ’@angular/core’;
@Component({
selector: ’app-pere’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
export class PereComponent implements OnInit {
tab: Array<string> = ["premier", "deuxieme", "troisieme"];
nord: string = "Lille";
sud: string = "Marseille";
capitale: string = "Paris";
constructor() { }
ngOnInit() {
}
}
Le fichier [Link]
<ul>
<app-fils [ordre]="tab[0]" [villeNaissance]="sud"></app-fils>
<app-fils [ordre]="tab[1]" [villeNaissance]="nord"></app-fils>
<app-fils [ordre]="tab[2]" [villeNaissance]="capitale"></app-fils>
</ul>
12-13 Avril 2018 7 / 12
Exemple avec @Output()
Angular
Avant de commencer
Créons deux composants parent et child
Définissions une route /parent pour le composant parent
12-13 Avril 2018 8 / 12
Exemple avec @Output()
Angular
Avant de commencer
Créons deux composants parent et child
Définissions une route /parent pour le composant parent
Dans cet exemple
Chaque élément child aura un champ texte pour saisir une note et un bouton
pour envoyer la valeur au composant parent
Le bouton sera désactivé après envoi
Le sélecteur du composant fils app-child sera ajouté dans
[Link]
Chaque fois que le composant parent reçoit une note d’un de ses fils, il
recalcule la moyenne et il l’affiche
12-13 Avril 2018 8 / 12
Exemple avec @Output()
Angular
Le fichier [Link]
<h6> {{ nom }} </h6>
<input type=number name=note [(ngModel)]=note>
<button (click)="send()" [disabled]="buttonStatus">
Send
</button>
12-13 Avril 2018 9 / 12
Exemple avec @Output()
Angular
Le fichier [Link]
import { Component, OnInit, Input, Output, EventEmitter } from ’
@angular/core’;
@Component({
selector: ’app-child’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
export class ChildComponent implements OnInit {
@Input() nom: string;
@Output() message = new EventEmitter<number>();
note: number;
buttonStatus: boolean = false;
constructor() { }
ngOnInit() { }
send() {
[Link]([Link]);
[Link] = true;
}
}
12-13 Avril 2018 10 / 12
Exemple avec @Output()
Angular
Le fichier [Link]
import { Component, OnInit } from ’@angular/core’;
@Component({
selector: ’app-parent’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
export class ParentComponent implements OnInit {
moyenne: number = 0;
somme: number = 0;
nbr: number = 0;
enfants = [’Wick’, ’Hoffman’, ’Abruzzi’];
constructor() { }
ngOnInit() { }
computeAvg(note: number) {
[Link] += note;
[Link]++;
[Link] = [Link] / [Link];
}
}
12-13 Avril 2018 11 / 12
Exemple avec @Output()
Angular
Le fichier [Link]
<h3> Moyenne de mes enfants {{ moyenne }} </h3>
<app-child *ngFor="let enfant of enfants" [nom]="
enfant" (message)="computeAvg($event)">
</app-child>
12-13 Avril 2018 12 / 12
