Click here to Skip to main content
15,742,797 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Team

I am struggling to create a toggle button to switch and and off, i must only implement component.ts and class to achieve this because other functionality have been implemented already on the background.

What I have tried:

// @ts-ignore
import { Component} from '@angular/core';

  selector: 'app-area',
  template:'<toggle-button changed() "checked=$event"></toggle-button>',
  styles:['toggle-button {margin:0 auto;}']

export class MainAppComponent {
  // code goes here

Updated 28-Feb-23 3:09am

1 solution

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';

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

  toggle() {
    this.state = !this.state;
Share this answer
Gcobani Mkontwana 28-Feb-23 10:57am    
@Andre thanks so much for your help, my code compiles and works
Andre Oosthuizen 28-Feb-23 11:04am    
only a pleasure

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900