I'm working on a toggle button that initially displays the word subscribe on the thumb. When the toggle is disabled, I want it to show unsubscribe instead. Can someone please help me achieve this functionality?
Here's the code snippet:
<md-slide-toggle class="showToggle" name="subscribe" required></md-slide-toggle>And here is the CSS styling:
.toggle{
margin: auto;
}
.toggle .mat-slide-toggle{
margin: auto auto auto 70px;
}
.toggle .mat-slide-toggle-bar{
padding: 20px 100px;
border-radius: 18px;
background-color: #654898 ;
}
.toggle .mat-slide-toggle-thumb{
padding: 10px 50px 30px 50px;
background-color: #b755ff ;
border-radius: 25px;
top: 3px !important;
border:1px solid white;
}
.toggle .mat-slide-toggle-thumb:before{
content: 'subscribe';
margin-left:-28px !important;
}
.toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
padding: 10px 70px;
}
.toggle input[type=checkbox], .toggle input[type=radio]{
margin: 7px 0 0 !important;
}Finally, in TypeScript:
public device:boolean = true;