Créer un composant DisplayComponent ayant un sélecteur display-component

Fermé
LaMagie_37300 Messages postés 5 Date d'inscription dimanche 25 octobre 2020 Statut Membre Dernière intervention 4 novembre 2020 - 25 oct. 2020 à 14:27
On me demande de créer un composant Angular nommé DisplayComponent et
ayant display-component pour sélecteur.

il doit utiliser le composant VoterComponent(sélecteur=voter-component) dont le code est fourni.
DisplayComponent a 3 champs public nommés question,yesAnswer et noAnswer.

ils représentent une question posée à
l'utilisateur et les choix de réponses possibles affichés dans VoterComponent.

DisplayComponent doit utiliser VoterComponent en tant qu'enfant et doit lui passer
question,yesAnswer et noAnswer en entrée.

Quand l'utilisateur vote,VoterComponent créé un événement de type boolean vers un @Output
nommé output.

Je dois afficher le résultat du vote dans DisplayComponent dans un <div> avec id=lastVote:Si output
est vrai,alors on affiche yesAnswer,sinon on affiche noAnswer.

Voici le code:
import{Component,Input,NgModule,Output,EventEmitter } from '@angular/core';
 
@component({
       selector:'display-component',
       template:'
 
      '
 
})
 
export class DisplayComponent {
    public question="Too easy?"
    public yesAnswer="Yes";
    public noAnswer="no";
  }
 
// ne pas changer le code ci dessous
@component({
    selector:'voter-component',
    template:
    {{question}}
 <button (click)="vote(true)">{{yesAnswer}}</button>
 <button (click)="vote(false)">{{noAnswer}}</button>
 
})
 
export class VoterComponent {
 
 @Input()
  public question:string;
 
 @Input()
  public yesAnswer:string;
 
 @Input()
  public noAnswer:string;
 
@Output()
 public output=new EventEmitter<boolean>();
 
 public vote(vote: boolean):void {
 
    this.output.emit(vote);
    }
 
}


Voici le code que j'ai proposé:

import{Component,Input,NgModule,Output,EventEmitter } from '@angular/core';
 
@component({
       selector:'display-component',
       template:'<div id=lastVote>                 
       <h1 *ngIf="output">{{ }}</h1>   
       <voter-component></voter-component>

      </div>      
 
 
      '
 
})
 
export class DisplayComponent {
    public question="Too easy?"
    public yesAnswer="Yes";
    public noAnswer="no";
  }


J'ai essayé de traduire la phrase suivante en Angular2+:
"DisplayComponent doit utiliser VoterComponent en tant qu'enfant et doit lui passer
question,yesAnswer et noAnswer en entrée."
Par contre je ne sais pas comment traduire la phrase suivante en angular2+?
"afficher le résultat du vote dans DisplayComponent dans un <div> avec id=lastVote: Si output
est vrai,alors on affiche yesAnswer,sinon on affiche noAnswer."
j'ai utilisé :
<div id=lastVote>                 
       <h1 *ngIf="output">{{ }}</h1>   
       <voter-component></voter-component>
      </div>      

Et je ne sais pas si c'est juste car je dois traduire la condition :Si output est vrai,alors on affiche yesAnswer , sinon on affiche noAnswer
et je suis bloqué et je ne sais pas comment faire la suite.

Pouvez vous m'aider?
A voir également: