Angular Js: Angular Js

Angular2 Built in components - ngClass demo app

In this app we display how do we use the built in component ngClass in Angular 2.

/* Angular2 ngClass demo */

import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';

@Component({
selector: 'style-sample-app',
template: `
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

<div [ngClass]="classesObj">
Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>

<button (click)="toggleBorder()">Toggle</button>

<div class="selectors">
<div>
<input type="checkbox"
[checked]="classList.indexOf('blue') > -1"
(click)="toggleClass('blue')">
<span>Blue</span>
</div>

<div>
<input type="checkbox"
[checked]="classList.indexOf('round') > -1"
(click)="toggleClass('round')">
<span>Round</span>
</div>
</div>

<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and
round corners
</div>

<div class="base" [ngClass]="classList">
This is {{ classList.indexOf('blue') > -1 ? "" : "NOT" }} blue
and {{ classList.indexOf('round') > -1 ? "" : "NOT" }} round
</div>
`
})
class ClassSampleApp {
isBordered: boolean;
classesObj: Object;
classList: Array<string>;

constructor() {
this.isBordered = true;
this.classList = ['blue', 'round'];
this.toggleBorder();
}

toggleBorder() {
this.isBordered = !this.isBordered;
this.classesObj = {
bordered: this.isBordered
};
}

toggleClass(cssClass) {
var pos = this.classList.indexOf(cssClass);
if (pos > -1) {
/* Index returned is greater than -1 so the cssClass is found in classList.
Remove the cssClass from the array classList.
pos has the index of the element to be removed from the array pointed by classList.
1 means remove one element from the array starting from index pos.
*/
this.classList.splice(pos, 1);
} else {
/* Insert the cssClass in the array classList */
this.classList.push(cssClass)
}
}
}

bootstrap(ClassSampleApp);

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

The css used in this app is here. styles.css

body {
font-family: verdana, arial, helvetica, sans-serif;
}

div {
padding: 3px;
margin: 2px;
}

button {
margin-bottom: 20px;
}

.bordered {
border: 1px dashed black;
background-color: #eee;
}

.selectors {
width: 200px;
padding: 10px;
border: 1px solid black;
margin-bottom: 10px;
}

.base {
padding: 10px;
border: 1px solid #ccc;
}

.blue {
color: white;
background-color: blue;
}

.round {
border-radius: 20px;
}

.ui.menu .item img.logo {
margin-right: 1.5em;
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

The index.html file used in this app is here.

<!doctype html>
<html>
<head>
<title>Angular 2 - ngClass demo</title>
<link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="resources/images/favicon.ico" />

<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>


<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>


<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app.js')
.then(null, console.error.bind(console));
</script>


<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="resources/images/ng-book-2-minibook.png">
ng-book 2
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2 ngClass demo
</h1>
</div>
</div>
</div>

<div class="ui main text container">
<style-sample-app></style-sample-app> 
</div>

</body>
</html>

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////