Best way to implement a toggle button in AngularJS Material

Question

I am looking for a simple solution to implement a toggle button with a custom selected / unselected icon in AngularJS 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 AngularJS Material?

Community · Accepted Answer · 2020-09-11 18:38:30Z

8

You can define a toggle function to create toggle activity in your controller, like this:

$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}">

edited Sep 11, 2020 at 18:38

CommunityBot

11 silver badge

answered May 4, 2016 at 21:08

oguzhan00

5098 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-09-09 14:51:30Z

6

After some digging the best solution currently seems to be using an md-button, which allows custom icons, and extending it with ng-click and ng-class like this:

<md-button ng-click="selected = !selected"
           ng-class="{'selected-button' : selected}">

This takes care of the selection state. And in CSS I can then set the styles for the selected-button class

Even though the solution is rather simple, I think there should be an out-of-the-box support from Angular Material for a toggle button (or checkbox) with custom icons.

edited Sep 9, 2020 at 14:51

CommunityBot

11 silver badge

answered May 2, 2016 at 11:54

Waruyama

3,5433 gold badges34 silver badges47 bronze badges

1 Comment

marmor Over a year ago

not sure why, but ng-click="selected = !selected" didn't work for me, implementing a toggle() function in my controller did work.

Community · Accepted Answer · 2020-09-10 18:28:47Z

2

Properly using all classes of Angular Material v1.x

<md-button class="md-icon-button"
        ng-click="filterToggle = !filterToggle"
        ng-class="{'md-primary md-raised' : filterToggle}">
    <md-tooltip md-direction="bottom">Filter</md-tooltip>
    <md-icon ng-hide="filterToggle">filter_list</md-icon>
    <md-icon ng-show="filterToggle">clear_all</md-icon>
</md-button>

in controller set

$scope.filterToggle = false;

edited Sep 10, 2020 at 18:28

CommunityBot

11 silver badge

answered Aug 18, 2016 at 7:16

Kunal Panchal

1,05911 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2020-09-12 19:18:02Z

1

var app = angular.module('app', []);

app.controller('CommentController', function($scope) {
  $scope.filterToggle = true;
  //start function.
  $scope.StartFunc = function() {
    $scope.filterToggle = false;
    console.log('in pause function.');
  };
  $scope.CallFunc = function() {
    $scope.filterToggle ? $scope.StartFunc() : $scope.PauseFunc();
  }
  // pause function.
  $scope.PauseFunc = function() {
    $scope.filterToggle = true;
    console.log('in pause function.');
  }
})

<link href="https://material.angularjs.org/1.1.2/angular-material.min.css" rel="stylesheet" />

<script src="https://material.angularjs.org/1.1.2/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="CommentController">
    <md-input-container>
      <md-button class="md-icon-button md-primary md-raised" ng-click="CallFunc()">
        <md-tooltip md-direction="bottom">Start/Pause Func</md-tooltip>
        <md-icon ng-hide="filterToggle" style="background-color:grey;width:auto;">pause</md-icon>
        <md-icon ng-show="filterToggle" style="background-color:grey;width:auto;">play_arrow</md-icon>
      </md-button>
    </md-input-container>
  </div>
</div>

edited Sep 12, 2020 at 19:18

CommunityBot

11 silver badge

answered Nov 16, 2016 at 6:57

Shridhar Sagari

2654 silver badges6 bronze badges

1 Comment

Maximilian Ast Over a year ago

It's normaly considered good form to explain your suggestions/answers. Code only answers can be surprisingly uninformative, even if they are technically correct.

Collectives™ on Stack Overflow

Best way to implement a toggle button in AngularJS Material

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related