python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
css binding in angularjs

How to apply the CSS class binding in AngularJs?



The ng-class angularjs binding are used to bind the CSS classes in HTML controls with JS binding functions.  

Click for live demo plnker

The example as give below.

1
2
3
4
5
6
7
8
9
//This is CSS code sample
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }

//This is CSS code sample
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }
01
02
03
04
05
06
07
08
09
10
11
12
13
//This is AngularJs code sample
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };
      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
//This is AngularJs code sample
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };

      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
//This is HTML code sample
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>
</body>
//This is HTML code sample
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>

</body>
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//Full example(CSS + HTML + JavaScript) code sample
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>css binding in angularjs</title>
  <style>
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }
  </style>
  <script src="https://code.angularjs.org/1.3.9/angular.js"></script>
  <script>
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };
      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
  </script>
</head>
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>
</body>
</html>
//Full example(CSS + HTML + JavaScript) code sample
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>css binding in angularjs</title>
  <style>
    .background1 {
      background-color: #eeee12;
      color: red;
    }
    .background {
      background-color: #3ab44a;
      color: white;
    }
  </style>
  <script src="https://code.angularjs.org/1.3.9/angular.js"></script>
  <script>
    var app = angular.module('ngApp', []);
    app.controller('MainController', function($scope) {
      $scope.color = {
        back: true
      };

      $scope.emp = {
        name: 'Anil Singh',
        comp: 'code-sample.com',
        age: '30 Years'
      };
    });
  </script>
</head>
<body ng-app="ngApp" ng-controller="MainController">
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.name}}</span>
    </label>
  </div>
  <div ng-class="{'background1': color.back}">
    <label>
      <span>{{emp.comp}}</span>
    </label>
  </div>
  <div ng-class="{'background': color.back}">
    <label>
      <span>{{emp.age}}</span>
    </label>
  </div>
</body>
</html>

The Out put look like below image


ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions