use ngx-toggle-switch library
install npm install ngx-toggle-switch --save
Usage:-
import { UiSwitchModule } from 'ngx-toggle-switch';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, UiSwitchModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
in markup language:-
<ui-switch></ui-switch>
For Two way binding
<ui-switch [(ngModel)]="enable"></ui-switch>
For document of the Packge please refer :- ngx-toggle-switch
You can get the functionality with normal check box and some css. Below is the code which will help.
Css :
.switch {
position: relative;
display: inline-block;
width: 45px;
height: 20px;
margin: 20px;
}
.switch input {display:none; background-color: #ccc;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 0px;
right: 0px;
bottom: -3px;
background-color: #2196F3;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider:before {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
Html :
<div class="row">
<label>Yes</label>
<label class="switch">
<input type="checkbox" [(ngModel)]="isNewProfile">
<span class="slider round"></span>
</label>
<label>No</label>
</div>
This works on my site
<div class="custom-control custom-switch pt-4"> <input type="checkbox" class="custom-control-input" id="activeStatus" name="activeStatus" [(ngModel)]="user.activeStatus"> <label class="custom-control-label" for="activeStatus">Is Active</label> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.