How to create Angular JS ON-OFF Switch

Question

I am trying to create ON-OFF switch by referring the link

Here i can not use the FontAwesome reference in the index.html file and what i have done is i have copied the font-awesome-css file in my project. But the switch ON-OFF button is not getting displayed.

Here i have deleted the reference from index.html and the content of font-awesome.min.css is copied on my style.css file My requirement is to create ON-OFF switch based on the model value(Boolean).

and it should have edit (ON/OFF) feature in it.

Can anyone suggest why the css file didn't work or is there any other way i can do it .

I am looking for the oval shape button mentioned in the code project file. can i have similar one. — jubi, Feb 23 '17 at 06:36
you need to modify the supplied CSS file to point to the font location on your site. — Sachila Ranawaka, Feb 23 '17 at 06:36
Did u refer https://www.w3schools.com/howto/howto_css_switch.asp — Lini Susan V, Feb 23 '17 at 06:40
check this answer http://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares?answertab=active#tab-top — Sachila Ranawaka, Feb 23 '17 at 06:54
@Lini : It is coming as a normal checkbox for me. i will copy my code. — jubi, Feb 23 '17 at 08:22
@jubi you have to add the corresponding css also. Check the code in 'Try it' section besides that https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch — Lini Susan V, Feb 23 '17 at 08:25
this is my view.. when i nested div in label it shows some error saying can not nes the label — jubi, Feb 23 '17 at 08:46
@sachilaranawaka : Font reference was missing in my style.css. I have included the font to my project and given the reference. But still the issue is not resolved — jubi, Feb 23 '17 at 08:58
@sachilaranawaka : you were right,issue was with the font. Due to caching issue the font files changes was not reflected in my solution.Thanks. here by default it is active i want to set the staus active based on a model value (bool ) — jubi, Feb 23 '17 at 11:43
Can you help me to conditionally show the switch on/off based on the model value . here by defult — jubi, Feb 23 '17 at 11:51

score 7 · Answer 1 · answered Jun 13 '18 at 06:12

Fontawesome simple switch

<style>
     .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        i.active {
            color: #5cb85c;
        }

        i.inactive {
            color: #d9534f;
        }
    </style> 

<i class="fa fa-toggle-on" ng-class="isActive?'active':'fa-rotate-180 inactive'" ng-click="isActive=!isActive" />

"isActive"(bool) is the switch status

Lini Susan V · Answer 2 · 2017-02-23T08:27:15.533

I have copied the code from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

<!DOCTYPE html>
<html>
<head>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.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: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider round"></div>
</label>

</body>
</html>

I cant use the buttons.my req is to get the same appearance in the exapmle — jubi, Feb 23 '17 at 06:53

Biyu · Answer 3 · 2017-02-23T07:17:59.627

<html lang="en">

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script language="javascript">
    angular
      .module('myApp', ['ngMaterial'])
      .controller('switchController', switchController);

    function switchController($scope) {
      $scope.data = {
        switch1: true
      };
      $scope.message = 'false';
      $scope.onChange = function(state) {
        $scope.message = state;
      };
    }
  </script>
</head>

<body ng-app="myApp">
  <div id="switchContainer" ng-controller="switchController as ctrl" layout="column" ng-cloak>
    <md-switch ng-model="data.switch1" aria-label="Switch 1">
      Switch 1: {{ data.switch1 }}
    </md-switch>

  </div>
</body>

</html>

How to create Angular JS ON-OFF Switch

3 Answers3