switching toggle button on and off using template

#angular #html #buttton

Hi team

I need some help with my logic below, basically i am answering this instruction below using angular js to create switch toggle button in Angular.

//instructions for the task.

We provided some simple Angular template code. Your goal is to modify the component so that you can properly toggle the button to switch between an ON state and an OFF state. When the button is on and it is clicked, it turns off and the text within it changes from ON to OFF and vice versa.

// code solution but its not showing any UI to switch on and off.
// @ts-ignore
`import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-area',
template: `

`,
styles: []
})

export class MainAppComponent implements OnInit {
// code goes here
ngOnInit() {

}
}`

Top comments (6)

NLxDoDge • Mar 6 '23

Ok it's a long time ago that I used Angular, but I can give you some pointers to check the documentation for.

Here you can find the official Angular documentation for implementing a variable in a template.

Why do I link this? You most likely, want to have an on click listener. That when clicked on needs to switch the state (boolean most likely) and the text based on the boolean.

For example anywhere in your template you can do something like this:

<div>{{ yourVariableName === true ? "ON" : "OFF" }}</div>

This way it will show the ON or OFF in your template.

Now you need something with the (click) syntax to call a function to switch that boolean.

<button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }}</button>

Where you have a function that toggles it:

function toggleState() {
    yourVariableName != yourVariableName;
}

But my highest recommendation is to have a look at the Angular documentation here for some tutorials and overal help 🤗 This helped me get up to speed when I started with Angular.

Gcobani Mkontwana • Mar 6 '23

I believe my variablename will be toggle-button i guess, so the function must use it below the class and remove onInit method?. Please share full logic i dont want to miss steps

NLxDoDge • Mar 6 '23 • Edited

The onInit method is called when your component is being showed in the browser. See it as a first run function when the component is done rendering (which will be run 1 time only).

This is good, but your button needs to change when you click on it. That why I would recommend that you have a separate function, so yes you can remove the onInit method and import.

I haven't use angular in like 3+ years so this code will 100% not work (this is where you come in, by fixing the small parts).

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

@Component({
selector: 'toggle-button',
template: `
<div class="toggle-button">
    <button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }} />
</div>
`})

export class ToggleButton {
    buttonState: boolean = false;

    function toggleState() {
        this.buttonState != this.buttonState;
    }
}