Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and None) compare to each other.
<html>
<head>
<title>Angular 2 QuickStart</title>
<style>
.started{
background-color: #0b97c4;
}
.completed{
background-color: #80d8ff;
}
</style>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {'app': {defaultExtension: 'js'}}
});
System.import('app/app');
</script>
</head>
<div class="started">Started</div>
<div class="completed">Completed</div>
<body>
<app>Loading...</app>
</body>
</html>
import {Input, Component, View, NgClass, ViewEncapsulation} from "angular2/angular2";
import {TodoModel} from './todoService';
@Component({
selector: 'todo-item-render'
})
@View({
encapsulation: ViewEncapsulation.Emulated, // default state: the global style will have an affect on compoment style
directives: [NgClass],
styles: [`
.${TodoModel.STARTED}{
color: green;
}
.${TodoModel.COMPLETED}{
text-decoration: line-through;
}
`],
template: `
<div>
<span [ng-class]="todoinput.status">{{todoinput.title}}</span>
<button (click)="todoinput.toggle()">Toggle</button>
</div>
`
})
export class TodoItemRender{
@Input() todoinput: TodoModel;
}
if we switch to Native:
encapsulation: ViewEncapsulation.Native, // Use shadow down, which mean the global style will not affect the compoment sytle
last, we switch to None:
encapsulation: ViewEncapsulation.None, // the component style and global style are the same, affect each other
