react to angular
salut tous le monde, j'ai une petite question a propos d'angular. Je viens du monde de react et je commence à en avoir marre de l'ecosysteme react, c'est à dire tous l'environement à apprendre et a maintenir (react, reason, redux, immutablejs, etc...) je me suis mit a react et en faite j'aimerais savoir qu'elle est l'équivalent des this.props dans angular? c'est a dire les info a définir dans le composant quand on l'appel.
voila l'exemple react
<app-component name="test" detail="detail"></app-component>comment dans mon composant angular je défini les prop name et detail? j'ai essayé en passant un ngmodel, en passant un @input mais rien ne marche.
7 réponses
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
Hello Defy,
Ta question n'est pas très claire pour moi. et je te réponds donc :)
1/ Comment définir des variables dans un component (le plus simple)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'mon-component',
templateUrl: './mon-component.html',
styleUrls: ['./mon-component.css']
})
export class MonComponent implements OnInit {
// je déclare ici les variables du component (et si je veux je les type - bonne pratque)
name:string = 'name'
detail:string = 'test';
constructor() { }
/*
Dans la méthode ngOnInit ou dans nos méthodes perso on peut rappeler les varaibles de notre component avec:
this.nom_de_la_variable (this étant ici l'objet du component)
*/
ngOnInit() {
}
/*
exemple:
setName(newName) {
this.name= newName;
}
*/
}
2 Afficher tes variables dans la vue HTML
(C'est ce qu'on appelle le data-binding simple, c'est à dire de la logique -> vers la vue)
<h1>{{name}}</h1>
<p>{{detail}}</p>
PS : Si ta question concerne autre chose nhésite pas je te répondrai :)
- SI ta question concerne plutôt comment passer des variable à un component via le binding de propriété (ce que tu tu écris ici sur ton AppComponent...)
- Si ta question concerne plutôt comment faire du "double data-binding" (vue->logique, logique->vue)
- Si ta question concerne plutôt comment passer des data entre components parent-enfant via le binding de propriété
Fred
j'ai créer un composant card et je voudrais pouvoir l'utiliser dans un ngFor pour le peuplé des infos que je récupère dans ma boucle
@jiimibi, le data-binding classique, c'est pas ce qu'il cherche visiblement. C'est l' explication que j'ai déjà donné plus haut :)
Il cherche à passer des datas à son component depuis un autre visiblement
@Defy : Donne ta structure HTML clairement, car sur Angular il y a plusieurs manières de faire ;)
Tu veux dire que DANS ton component parent tu aurai les data, ET dans le html de ton component parent tu aurai ton component card ? Si c'est oui est-ce que c'est ce que tu cherches à faire ça ?
HTML de ton component parent
<app-card [cards]='cards'></app-card>HTML de ton component app-card
<ul>
<li *ngFor="let card of cards">{{card.name}}</li>
</ul>Si c'est le cas, oui tu peux passer des datas DE ton component parent A ton component app-card, depuis le HTML de component parent grâce à @Input et le property binding. Mais avant que je t'explique, est-ce que c'est ce que tu veux faire ?
Oui ca m'aide pas mal meme, parcontre j'aimerais bien quelque eclairsissement a propos des service RxJs.
Ok pas de souci @defy. Passe ce sujet en "résolu" sur ma dernière réponse, et je te réponds sur un autre post sur RxJS et les subjects.