How to toggle button on and off using angular component ts and class?

You are almost there. I have noticed that you post a lot of questions, all in different language sets. I would suggest that you rather concentrate on 1 set, read as much as can to master it and then move on to the next.

I have googl'ed your question and there were tons of samples and how-to's regarding your question...

Your code for the toggle button will look like this -

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

@Component({
  selector: 'app-toggle-button',
  template: `
    <button (click)="toggle()">Toggle {{ state ? 'On' : 'Off' }}</button>
  `
})
export class MainAppComponent {
  state = false;

  toggle() {
    this.state = !this.state;
  }
}