Appeler un composant Angular dans une autre Vue Html - Découvrir angular–Mon premier projet

Nous avons une approche où nous avons deux pages : une page qui liste, une page qui affiche. Or, nous pouvons aussi appeler un composant dans un autre.

Allons-y profitons de cette puissance dans Angular, et vive le DRY !

S’inspirer du premier composant

Initialement, nous avons un composant qui est appelé dans la page principale, et unique du projet (le index.html).

Qu’y trouve-t-on ?

<app-root></app-root>

App-Root est le selector qui a été défini dans notre Component principal AppComponent.

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’]

})

export class AppComponent {

title = ‘Tour of heroes’;

}

Appeler un selector de composant dans une Vue d’un composant

Et si cette possibilité pour le AppComponent, on pouvait l’utiliser pour toutes les vues ?

Angular y a pensé, et c’est possible !

Nous avons créé un composant dédié à l’affichage d’un Element.
Reprenons l’exemple proposé par Angula sur leur tutorial en ligne.

@Component({

selector: ‘app-hero-detail’,

templateUrl: ‘./hero-detail.component.html’,

styleUrls: [‘./hero-detail.component.css’]

})

export class HeroDetailComponent implements OnInit {

hero: Hero;

constructor() { }

ngOnInit() {

}

}

Ici, le selector est ‘app-hero-detail’.

Donc, on va pouvoir appeler ce selector dans une autre vue !

<app-hero-detail></app-hero-detail>

Or ce composant doit connaître le Hero sélectionné pour afficher la bonne Vue.

@Input et binding depuis la Vue

Pour permettre ce fonctionnement, nous allons utiliser un autre decorateur prévu par Angular : @Input.

Pour décorer notre attribut de classe hero :

@Input() hero: Hero;

Ce qui va nous permettre d’affecter l’attribut Hero, directement depuis la Vue :

<app-hero-detail [hero]= »selectedHero »></app-hero-detail>

NOTE : Vous avez remarquez les crochets, qui indique un lien entre le Composant, et la Vue : la notion de Binding.
Nous les avons déjà utilisé pour récupérer une classe css depuis le Composant.