https://github.com/rxlabz/ng2_compocom
https://github.com/rxlabz/ng2_compocom
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/rxlabz/ng2_compocom
- Owner: rxlabz
- Created: 2016-11-03T12:07:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-26T23:00:14.000Z (over 9 years ago)
- Last Synced: 2025-03-09T15:08:49.700Z (over 1 year ago)
- Language: TypeScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Communication entre composants parent-enfant
## @Input
- parent -> enfant : @Input()
Définition d'une proprieté publique ou d'un setter(/getter) annotée `@Input()`
```typescript
@Component({
selector: 'app-compo-enfant',/* ... */
})
export class CompoEnfantComponent {
@Input() nom: string;
}
```
Les propriétés @Input peuvent être renseigné via l'attribut du même nom dans le template html du composant parent.
```html
```
## @Output
- enfant -> parent : @Output()
Pour communiquer avec on parent, un composant peut utiliser des EventEmitter.
Les EventEmitters sont en fait des "sujets observables" :
c'est un tuyau, ou plutôt un flux, que l'élement enfant expose pour envoyer des informations.
Les EventEmitters sont [génériques](), chacun doit donc typer les "events" qu'il emettra.
Il ne s'agit pas là d'évenements DOM, en fait, il s'agit tout simplement d'une donnée que l'on souhaite transmetre.
```typescript
@Output() onNewString: EventEmitter = new EventEmitter();
```
Pour envoyer des données, aka ajouter des informations aux flux, un eventEmitter expose une méthode next(param:T).
```typescript
//..
this.onNewString.next(text);
```
Pour se brancher aux flux, on ajoute un écouteur `(evenement)` dans le template parent.
Le handler de cet évenement a accès aux données envoyés via `$event`.
```html
```
## Extras
### pipe
```typescript
{{msg.date | date}}
```
## Installation
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.16.
```bash
npm install
ng serve
```