Issue
I am asked to create an Angular component named DisplayComponent and having display-component for selector.
it must use the VoterComponent component (selector = voter-component) whose code is provided. DisplayComponent has 3 public fields named question, yesAnswer and noAnswer.
they represent a question asked to the user and the possible answer choices displayed in VoterComponent
DisplayComponent must use VoterComponent as a child and must pass it question, yesAnswer and noAnswer as input.
When the user votes, VoterComponent creates a boolean event to an @Output named output.
I have to display the result of the vote in DisplayComponent in a <div>
with id = lastVote: If output
is true, then we print yesAnswer, otherwise we print noAnswer.
Here is the 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";
}
// do not change
@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);
}
}
import {Component, Input, NgModule, Output, EventEmitter} from '@ angular / core';
@component ({
selector: 'display-component',
template: <div id='lastVote' *ngIf="output;else noAnswer">
<h1>{{yesAnswer}}</h1>
<ng-template #noAnswer>{{noAnswer}}</ng-template>
</div>
<voter-component></voter-component>
'
})
export class DisplayComponent {
public question = "Too easy?"
public yesAnswer = "Yes";
public noAnswer = "no";
output=true;
}
// do not change
@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);
}
}
import {Component, Input, NgModule, Output, EventEmitter} from '@ angular / core';
@component ({
selector: 'display-component',
template: <div id='lastVote' *ngIf="output;else noAnswer">
<h1>{{yesAnswer}}</h1>
<ng-template #noAnswer>{{noAnswer}}</ng-template>
</div>
<voter-component></voter-component>
'
})
export class DisplayComponent {
public question = "Too easy?"
public yesAnswer = "Yes";
public noAnswer = "no";
output=true;
}
// do not change
@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);
}
}
I searched for a while and I don't know how to complete this code, but i tried something and started like this, here is the code i suggest:
import {Component, Input, NgModule, Output, EventEmitter} from '@ angular / core';
@component ({
selector: 'display-component',
template: '<div id = lastVote>
<h1 * ngIf = "output"> {{}} </h1>
'
})
export class DisplayComponent {
public question = "Too easy?"
public yesAnswer = "Yes";
public noAnswer = "no";
}
but I do not know how translate the following sentences into Angular2 +: "
DisplayComponent must use VoterComponent as a child and must pass it
question, yesAnswer and noAnswer as input.
When the user votes, VoterComponent creates a boolean event to an @Output
named output.
I have to display the result of the vote in DisplayComponent in a <div>
with id = lastVote: If output
is true, then we print yesAnswer, otherwise we print noAnswer. "
Do you have an idea please?how can i complete these code?
Solution
display-component component should look like this. it will work:
@Component({
selector: 'display-component',
template: `
<div id="lastVote">{{ answer }}</div>
<voter-component
[question]="question"
[yesAnswer]="yesAnswer"
[noAnswer]="noAnswer"
(output)="setVote($event)"
></voter-component>
`
})
export class DisplayComponent {
public question = 'Too easy?';
public yesAnswer = 'Yes';
public noAnswer = 'no';
public answer: boolean;
setVote(event: boolean) {
this.answer = event ? this.yesAnswer : this.noAnswer;
}
}
I share here a stackbltiz link with the solution: https://coding-game-voter-display-angular-components.stackblitz.io
Answered By - hichem hamdaoui
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.