angular switch code example

Example 1: *ngSwitch

<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

Example 2: angular switch component

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
</container-element>

Example 3: toggle switch angularjs

<div class="container" ng-app="app" ng-controller="mainController">
    
    <div class="btn-switch" ng-class="{'btn-switch--on':toggle.switch}" ng-model="toggle.switch" ng-click="toggle.switch = !toggle.switch">
        
        <div class="btn-switch-circle" ng-class="{'btn-switch-circle--on':toggle.switch}" ng-model="toggle.switch" ng-click="!toggle.switch = toggle.switch"></div>
        
    </div>
</div>
<script>
  var app = angular.module('app', ['ui.bootstrap'])
  app.controller('mainController', function($scope) {

  $scope.toggle = {};
  $scope.toggle.switch = false;

});
</script>
<style>
  .container {
    width: 50px;
    margin: 50px auto;
}

.btn-switch {
    position: relative;
    display: block;
    width: 50px;
    height: 25px;
    cursor: pointer;
    background-color: #F27878;
    border: 2px solid #F27878;
    border-radius: 40px;
    
    .btn-switch-circle {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        height: 25px;
        width: 25px;
        background-color: #fff;
        border-radius: 40px;
    }
}

.btn-switch--on {
    background-color: #80CDBE;
    border: 2px solid #80CDBE;
    
    .btn-switch-circle--on {
        left: auto;
        right: 0;
    }
}
  </style>