Exercise Goals

Toggle a class on an element via a button using the @HostBinding decorator


  1. Add the @HostBinding() decorator to the fun property.
  2. Specify the fun CSS class name to add and remove when toggling the boolean value of the fun property.


Exercise Problem


  • The onToggleFun() method in the AppComponent class toggles the boolean value of the fun property. This method is invoked when the user clicks on the "Toggle" button in the template.
  • The .fun CSS is already defined in the app.component.css file.
  • When the user toggle the fun class on the element, the font should be changed to Comis Sans MS.

I finished! On to the next chapter