toggle button on and off using angular component and class?

Question

Hi Team

I need some help when i run this code on  coderbyte online IDE its giving me errors. The main objective is for me to toggle button on when its clicked and off when off. I tried to use this code found online as a test but in online IDE it does work.

 

// toggle button on and off using angular component ts and class

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular Toggle Button</h1>
    <toggle-button (changed)="checked=$event">
    </toggle-button>
    <p>The state is {{checked ? 'ON' : 'OFF'}}.</p>
  `,
  styles: [ `
    h1 {
      color: #DB5B33;
      font-weight: 300;
      text-align: center;
    }
    
    toggle-button {
      margin: 0 auto;
    } 
  `]
})
export class AppComponent  {
  checked: boolean;
}