mdb-switch state


Topic: mdb-switch state

IT Infrastructure pro asked 4 years ago

How to determine switch state in angular?

IT Infrastructure pro answered 4 years ago

Thanks a lot, also you can get switch state by ngModel: <html>
<input type="checkbox" [(ngModel)]='model' >

<button mdbBtn color="primary" (change)="switchState()">Switch state</button>
<ts>
switchState(){ console.log(this.model) }

Damian Gemza staff answered 4 years ago

Dear IT Infrastructure, You can change the switch state by using ViewChild and Renderer2 classes. Add Angular identifier to the input element (#switch), and create a button with a method on click. In this method with renderer set checked attribute to true or false. Please take a look at below code: html:
<!-- Switch -->

<div class="switch">

<label>

Off

<input #switchtype="checkbox">

<span class="lever"></span>

On

</label>

</div>

<button mdbBtn color="primary" (click)="switchState()">Switch state</button>
ts:
@ViewChild('switch') switch: ElementRef;

constructor(privaterenderer:Renderer2) {}

switchState() {

this.renderer.setAttribute(this.switch.nativeElement, 'checked', 'true');

}
Best Regards, Damian
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: no
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No