Take a survey to determine if the facts are true or not.
- Open the src/app/components/fact/fact.component.ts file and define a new
trueOrFalseChangeproperty that is a new
EventEmitter()instance. Specify the generic for the event emitter to be a
booleanvalue. Then, add the
@Output()decorator to the property so that Angular knows that this property is an output binding.
- Open the src/app/components/fact/fact.component.html template file and add a
clickevent binding to each
<button>element. When the button is clicked, invoke the
emit()method on the
trueOrFalseChangeevent emitter, specifying either the
- Open the app.component.html template file and add the output binding syntax to the custom
<app-fact>component for the
trueOrFalseChangeoutput, and invoke the
onTrueOrFalseChange()method that is already defined the
AppComponentclass, specifying the
$eventvalue that was emitted.
- Note that the
factproperty in the
FactComponentis already defined as an input binding.
- Don't forget to use the
@Output()decorator on the
trueOrFalseChangeproperty in the
FactComponentto indicate to Angular that the property is an output binding.
- In the app.component.html file remember to use the parenthesis notation around the output binding name and then specify the expression that will be executed in the double quotes, for example:
- The value emitted by the
EventEmitteris a boolean value, and the value is always referenced by the syntax
$eventin the binding template.
onTrueOrFalseChange()method is already defined for you in the
AppComponentclass, and it expects to receive the
booleanvalue that is emitted.