Ok. Alors tu peux tout à fait faire ça avec 2 choses :
- Le binding de propriétés
- le @input
Exemple : Sur le component parent, tu disposes d'un array qui liste des consoles de jeu, et tu veux les passer à un component enfant qui affichera la liste. Pour l'exemple ici app-component est le parent et app-card est l'enfant.
Comment faire :
Dans le html du component parent, tu places le tag de ton component enfant <app-card>
Et tu lies SA propriété cards à data (la donnée de ton component parent) via la le property binding
[nom_de_la_variable_dans_le_component_enfant]=data_du_component_parent (ton Array)
(note : les crochets sont importants, faut pas les oublier :) )
app.component.html
<app-card [cards]='data'></app-card>
Tu disposes de l'array data dans le parent
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
data = [
{name:"PlayStation", price:399},
{name:"Xobx", price, 299},
{name:"NintendoSwitch", price:499}
]:
}
Maintenant, dans le TS de ton component enfant, tu DOIS explicitement
lui dire qu'il attend des propriétés venant des propriétés que tu as déjà associées à son HTML
grâce à @input
app-card.ts (component enfant)
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css'],
})
export class CardComponent implements OnInit {
@Input() public cards;
ngOnInit() {}
}
Maintenant tout est prêt, tu peux afficher tes data dans le component enfant
app-card.html (component enfant)
<ul>
<li *ngFor="let gamebox of cards">{{gamebox.name}} {{gamebox.price}} €</li>
</ul>
Maintenant dès que tu modifiera la propriété data sur ton component parent,
la propriété cards sera automatiquement mise à jour sur ton component enfant, et donc la vue avec.
NB : Très important => Avec Angular tu as 3 façons principales pour transmettre des données entre les components
- @input (transmettre des data du parent à l'enfant)
- @output (l'inverse, transmettre des data de l'enfant au parent)
- via les services avec RxJS (les subjects et les Behavior subjects) (transmettre des data entre les components qui ne sont pas parents/enfants, siblings par exemple)
En espérant que ça t'aide ;)
Fred