Exercise Goal

Take a survey to determine if the facts are true or not.

Tasks

1. Open the src/app/components/fact/fact.component.ts file and define a new trueOrFalseChange property that is a new EventEmitter() instance. Specify the generic for the event emitter to be a boolean value. Then, add the @Output() decorator to the property so that Angular knows that this property is an output binding.
2. Open the src/app/components/fact/fact.component.html template file and add a click event binding to each <button> element. When the button is clicked, invoke the emit() method on the trueOrFalseChange event emitter, specifying either the true or false boolean value.
3. Open the app.component.html template file and add the output binding syntax to the custom <app-fact> component for the trueOrFalseChange output, and invoke the onTrueOrFalseChange() method that is already defined the AppComponent class, specifying the $event value that was emitted.

Exercise

Exercise Problem

Notes

• Note that the fact property in the FactComponent is already defined as an input binding.
• Don't forget to use the @Output() decorator on the trueOrFalseChange property in the FactComponent to 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: (outputBindingChange)="expression".
• The value emitted by the EventEmitter is a boolean value, and the value is always referenced by the syntax $event in the binding template.
• The onTrueOrFalseChange() method is already defined for you in the AppComponent class, and it expects to receive the boolean value that is emitted.