Menu
I am trying to create a toggle button in Angular. What I have so far is:
<div class="btn-group"> <a class="btn btn-primary pull-right" ng-click="toggleArchive(true)" ng-show="!patient.archived">Archive patient</a> <a class="btn btn-danger pull-right" ng-click="toggleArchive(false)" ng-show="patient.archived">Unarchive patient</a> .... some other buttons .... </div> Basically I achieve toggling, by having TWO buttons, and toggling between them. This is causing issues because the ng-hide just adds a display:none style to the button when it's hidden, which is causing me styling issues. Ideally I want to have ONE button, that has it's text, class and function call changed depending on the state of patient.archived.
What's a clean way to achieve this?
475
We can toggle a button using conditional statements like if-else statement in JavaScript. We can toggle almost all the properties of an element like its value, class, id, and color in JavaScript. To change any property of an element, we need to get the element using its id or class.
A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object.
Adding Button Toggle Component:import {MatButtonToggleModule} from '@angular/material/button-toggle'; To use the toggle button component in our code we have to import MatButtonToggleModule into the imports array. Example 1: The below example illustrates the implementation of the Angular Material Button Toggle.
You should use ng-class to toggle between classes and bind the text with a regular Angular expression. Also, if your function toggleArchive only toggle the value, you can remove it and toggle the value from an Angular expression:
<a class="btn pull-right" ng-class="{true: 'btn-primary', false: 'btn-danger'}[!patient.archived]" ng-click="patient.archived = !patient.archived"> {{!patient.archived && 'Archive' || 'Unarchive'}} patient </a> for any other weary traveller...
you could simply have used ng-if. ng-if completely excludes the element from the DOM if false, so you'd have no issues with styles when not displayed. Also there is not really a need for the button group you could just change the text of the button
Something like this:
<button class="btn btn-primary pull-right" ng-click="toggleArchive(true)" ng-if="!patient.archived">Archive patient</button> <button class="btn btn-danger pull-right" ng-click="toggleArchive(false)" ng-if="patient.archived">Unarchive patient</button> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
