[Angular 2] Controlling how Styles are Shared with View Encapsulation

Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and None) compare to each other.

 

• Emulated: default  

  (parent style pass )in and no (child style go) out

• Native: 

  no in and no out

• None

  in and out

 

import {Component, Input, ViewEncapsulation} from 'angular2/core';
@Component({
    selector: 'todo-item-renderer',
    encapsulation:ViewEncapsulation.Emulated, //Default, (parent style pass )in and no (child style go) out
    // encapsulation:ViewEncapsulation.Native, // no in and no out
    //encapsulation:ViewEncapsulation.None, // in and out
    template: `
        <style>
            .completed{
                text-decoration: line-through;
            }
        </style>
        <div>    
            <span [ngClass]="todo.status"
                  [contentEditable]="todo.isEdit">{{todo.title}}</span>
            <button (click)="todo.toggle()">Toggle</button>
            <button (click)="todo.edit()">Edit</button>
        </div>
    `
})

export class TodoItemRenderer{
    @Input() todo
}

 

encapsulation:ViewEncapsulation.Native, // no in and no out

 

 

encapsulation:ViewEncapsulation.None, // in and out