Waruyama Waruyama - 24 days ago 20
AngularJS Question

Best Way to Implement a Toggle Button in Angular Material

I am looking for a simple solution to implement a toggle button with a custom selected / unselected icon in Angular Material.

The functionality should be identical to the md-checkbox (with ng-model for the selection state), but I want to have my own icon displayed for selected / unselected state. md-checkbox does not seem to support custom icons, and md-button lacks the ng-model.

Preferably I would like to avoid implementing a custom directive and only make this work through css. Is this possible with Angular Material?

Answer

you can define a toggle function for create toggle activity in controller

$scope.toggle = function(){
      $scope.variable = !$scope.variable
      console.log($scope.variable);
    }

button on the html:

<md-button ng-click="toggle()" ng-class="{'active' : variable, 'disable': !variable}">