Angular 2: Getting Started

Angular 2 for beginners, including app architecture, components, services, http and routing. Everything you need to build a much-more-than-basic app. Presented at SheCodes(tlv), May 2016.

Transcript

1. Angular 2: Getting Started Shmuela Jacobs Campus TLV, 31.5.2016
2. Shmuela Jacobs - ng-ninja by day - Octo-Kitten by evening - vegan Goblin by night Sr. Web Developer @ 500Tech
3. http://www.meetup.com/Angular-AfterHours/
4. http://redux-book.com
5. ReactNext 2016 September 15 Dan Panorama, Tel Aviv http://react-next.com
6. • Intro to Angular 2 • TypeScript • App architecture • Components • Built-in Directives • Services • Http • Routing
7. Angular 2 https://angular.io https://github.com/angular/angular
9. JavaScript + Types TypeScript ES6 (ES-2015) JavaScript (ES5) • type checking
 string, number, boolean, any, Array<T> • custom types - interfaces • code help - intellisense • decorators • and more... Typescript: Angular 2's Secret Weapon - Dan Wahlin ng-conf 2016: https://youtu.be/e3djIqAGqZo
10. 
 
 
 
 class Dog { age = 0;
 children = [];
 
 talk(times: number) {
 const bark = 'Ruff! ';
 return bark.repeat(times);
 }
 }
 
 let Ziggi = new Dog();
 console.log(Ziggi.talk(3)); TypeScript + tooling
11. interface Animal {
 age: number,
 children: Array<Animal>,
 talk(times: number): string
 } class Dog implements Animal { age = 0;
 children = [];
 
 talk(times: number) {
 const bark = 'Ruff! ';
 return bark.repeat(times);
 }
 }
 
 let Ziggi = new Dog();
 console.log(Ziggi.talk(3)); TypeScript + tooling
12. http://www.typescriptlang.org
13. Setting up the environment
14. https://cli.angular.io https://youtu.be/wHZe6gGI5RY option #1
15. option #2 https://github.com/angular/angular2-seed
16. App Architecture
17. E-Store search 4
18. E-Store search 4
19. E-Store search 4 <header>
 <a href="home.html">E-Store</a>
 </header>
 <aside>
 <a href="cart.html">
 4 <img src="cart.jpg">
 </a>
 </aside>
 <main>
 <div>
 <input type="text">
 <button>search</button>
 </div>
 <div id="products">
 <ul>
 <li>
 <a href="product1.html">
 <h3>Product Title</h3>
 <img src="product.jpg">
 </a>
 </li> <li>...</li>
 </ul>
 </div>
 </main> appRoot my-store header search-bar products-list nav-bar product product product product x
20. appRoot my-store header search-bar products-list nav-bar product product product product x Component tree
21. appRoot my-store header search-bar products-list nav-bar product product product product x Component tree <product [product]="productToDisplay" (addToCart)="addProductToCart($event)"> </product> ( output ) [ input ]
22. appRoot my-store header search-bar products-list nav-bar product product product product x Change Detection product name changed
23. appRoot my-store header search-bar products-list nav-bar product product product product x Change Detection product name changed using OnPush change detection strategy
24. Component Template </> Controller { } Style {CSS}
25. Component Template </> Controller { } Style {CSS} Hi She Codes! <h1> Hi {{name}}! </h1> name = 'She Codes'; h1 { color: red }
26. Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS} Hi She Codes! <h1> Hi {{name}}! </h1> name = 'She Codes'; h1 { color: red }
27. appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide Services
28. appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide provide Services
29. appRoot my-store header search-bar products-list nav-bar product product product product x Services product service
30. appRoot my-store header search-bar products-list nav-bar product product product product x Routing
31. E-Store search 4
32. E-Store search 4
33. appRoot my-store header search-bar products-list nav-bar product product product product x Routing Router <router-outlet></router-outlet>
34. Break Angular 2 Project Setup With Angular CLI Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ
35. Components
36. appRoot my-store header search-bar products-list nav-bar product product product product x Component tree
37. Bootstrapping the root component // main.ts import { bootstrap } from '@angular/platform-browser-dynamic';
 import { MyStoreComponent } from './app/';
 
 bootstrap(MyStoreComponent);
 // index.html <body> <my-store></my-store> <script src="vendor/es6-shim/es6-shim.js"></script>
 <script src="vendor/reflect-metadata/Reflect.js"></script>
 <script src="vendor/systemjs/dist/system.src.js"></script>
 <script src="vendor/zone.js/dist/zone.js"></script>
 
 <script>
 System.import('system-config.js').then(function () {
 System.import('main');
 }).catch(console.error.bind(console));
 </script> </body>
38. Module Component Template </> Controller { } Directive { } Component </> + { } Service { } Style {CSS}
39. Bootstrapping the root component // main.ts import { bootstrap } from '@angular/platform-browser-dynamic';
 import { MyStoreComponent } from './app/';
 
 bootstrap(MyStoreComponent);
 // index.html <body> <my-store></my-store> <script src="vendor/es6-shim/es6-shim.js"></script>
 <script src="vendor/reflect-metadata/Reflect.js"></script>
 <script src="vendor/systemjs/dist/system.src.js"></script>
 <script src="vendor/zone.js/dist/zone.js"></script>
 
 <script>
 System.import('system-config.js').then(function () {
 System.import('main');
 }).catch(console.error.bind(console));
 </script> </body>
40. Bootstrapping the root component // main.ts import { bootstrap } from '@angular/platform-browser-dynamic';
 import { MyStoreComponent } from './app/';
 
 bootstrap(MyStoreComponent);
 // index.html <body> <my-store></my-store> <script src="vendor/es6-shim/es6-shim.js"></script>
 <script src="vendor/reflect-metadata/Reflect.js"></script>
 <script src="vendor/systemjs/dist/system.src.js"></script>
 <script src="vendor/zone.js/dist/zone.js"></script>
 
 <script>
 System.import('system-config.js').then(function () {
 System.import('main');
 }).catch(console.error.bind(console));
 </script> </body>
41. Basic component import { Component } from '@angular/core';
 
 @Component({ 
 selector: 'my-store',
 templateUrl: './app/my-store.component.html', 
 }) 
 export class MyStoreComponent {}
 my-store
42. Basic component import { Component } from '@angular/core'; 
 
 @Component({ moduleId: module.id,
 selector: 'my-store',
 templateUrl: 'my-store.component.html'
 }) 
 export class MyStoreComponent {}
 my-store
43. Basic component import { Component } from '@angular/core'; 
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '<h1>Welcome!</h1>' 
 }) 
 export class MyStoreComponent {}
 my-store
44. Basic component import { Component } from '@angular/core'; 
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '<h1>Welcome!</h1>', styleUrls: ['product.component.css']
 }) 
 export class MyStoreComponent {}
 my-store
45. Using child component my-store import { Component } from '@angular/core'; import { ProductComponent } from './product/product.component';
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '<product></product>', directives: [ProductComponent]
 }) 
 export class MyStoreComponent {}

46. Using child component import { Component } from '@angular/core'; import { ProductComponent } from './product;
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '<product></product>', directives: [ProductComponent]
 }) 
 export class MyStoreComponent {}
 // product/index.ts - barrel export { ProductComponent } from './action.component'; my-store
47. Basic component import { Component } from '@angular/core';
 
 @Component({ 
 selector: 'product',
 templateUrl: 'app/product/product.component.html'
 })
 export class ProductComponent {}
 // parent component template <product></product> product my-store // generate new component > ng g c product
48. Basic component import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 templateUrl: 'product.component.html'
 })
 
 export class ProductComponent {}
 // parent component template <product></product> product my-store // generate new component > ng g c product
49. Basic component import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>Hello World!</h1>`
 })
 
 export class ProductComponent {}
 product // generate new component > ng g c product
50. Binding to controller member import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>{{ title }}</h1>`
 })
 
 export class ProductComponent { title = 'Hello World!'; }
 product // generate new component > ng g c product
51. Binding to controller method import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>{{ getTitle() }}</h1>`
 })
 
 export class ProductComponent { 
 getTitle() {
 return 'Hello World!';
 } }
 product // generate new component > ng g c product
52. Class members and methods import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>{{ getTitle() }}</h1>`
 })
 
 export class ProductComponent { title = 'Hello World!'; 
 getTitle() {
 return this.title;
 } getTitle2() {
 return this.getTitle();
 } }
 product
53. Typings import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>{{ getTitle() }}</h1>`
 })
 
 export class ProductComponent { title: string = 'Hello World!'; 
 getTitle(): string {
 return this.title;
 } }
 product
54. Passing input import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>{{ title }}</h1>`, inputs: ['title']
 })
 
 export class ProductComponent { title: string; }
 // parent component template 
 <product title="Hello World!"></product> product my-store [ input ]
55. Binding input import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>{{ title }}</h1>`, inputs: ['title']
 })
 
 export class ProductComponent { title: string; }
 // parent component template 
 <product [title]="productTitle"></product> 
 // parent component controller productTitle ='Hello World!'; product my-store [ input ]
56. Binding input import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1>{{ product.title }}</h1>`, inputs: ['product']
 })
 
 export class ProductComponent { product: any; }
 // parent component template 
 <product [product]="productToDisplay"></product> 
 // parent component controller productToDisplay = { title: 'Hello World!' }; product my-store [ input ]
57. Binding to element property import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1 [style.color]="product.color">{{ product.title }}</h1>`, inputs: ['product']
 })
 
 export class ProductComponent { product: any; }
 // parent component template 
 <product [product]="productToDisplay"></product> 
 // parent component controller productToDisplay = { title: 'Hello World!', color: 'red' }; product my-store [ input ]
58. Catching events import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1 [style.color]="product.color">{{ product.title }}</h1>
 <button (click)="changeColor()">Change Color</button>`, inputs: ['product']
 })
 
 export class ProductComponent { product: any;
 
 changeColor() {
 this.product.color = 'blue'; } }
 // parent component template
 <product [product]="productToDisplay"></product> 
 // parent component controller productToDisplay = { title: 'Hello World!', color: 'red' }; product my-store ( output ) button
59. Emitting events import { Component, EventEmitter } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `
 <h1 [style.color]="product.color">{{ product.title }}</h1>
 <button (click)="changeColor('green')">Green</button> <button (click)="changeColor('blue')">Blue</button>`, inputs: ['product'], outputs: ['color']
 })
 
 export class ProductComponent { product: any; 
 color = new EventEmitter<string>();
 
 changeColor(chosenColor) {
 this.color.emit(chosenColor);
 } }
 product ( output ) my-store
60. Catching custom events (parent) @Component({ ... selector: 'product',
 inputs: ['product'], outputs: ['color']
 })
 import { Component } from '@angular/core'; import { ProductComponent } from './product';
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: ` <product [product]="productToDisplay" (color)="changeProductColor($event)"> </product>`, directives: [ProductComponent]
 })
 export class MyStoreComponent { productToDisplay = { title: 'Hello World!', color: 'red' };
 
 changeProductColor(event) {
 this.productToDisplay.color = event;
 } } product ( output ) my-store
61. Built-in Directives
62. ng-if *ngIf <h1>{{ product.title }}
 <span *ngIf="product.starred"> - Love it! </span>
 </h1>
63. ng-show / ng-hide [hidden] <h1>{{ product.title }}
 <span [hidden]="!product.starred"> - Love it! </span>
 </h1>
64. <product *ngFor="let productToDisplay of products"
 [product]="productToDisplay">
 </product> ng-repeat *ngFor
65. ng-model [(ngModel)] <h1>{{ product.title }}</h1> <input [(ngModel)]="product.title">
66. More built-in directives ng-class [ngClass] ng-style [ngStyle] ng-switch *ngSwitch ng-switch-when *ngSwitchWhen ng-switch-default *ngSwitchDefault form form (QTOUCTGCYJQNG PQVJGTUWDLGEV
67. <input #titleInput (keydown.enter)="submit(titleInput.value)"> <button (click)="submit(titleInput.value)"> Submit</button> Template reference variables
68. <input #titleInput (keydown.enter)="submit(titleInput.value)"> <button (click)="submit(titleInput.value)"> Submit</button> Template reference variables
69. More about Components: Lifecycle
70. constructor import { Component } from '@angular/core'; 
 
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 templateUrl: 'product.component.html'
 })
 
 export class ProductComponent { constructor() {
 // do simple stuff
 } }

71. constructor import { Component } from '@angular/core'; import { ProductService } from '../services/product.service';
 
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 templateUrl: 'product.component.html'
 })
 
 export class ProductComponent { constructor(private productService: ProductService) {
 // do simple stuff
 } }
 The service needs to be provided
72. onInit import { Component, OnInit } from '@angular/core'; import { ProductService } from '../services/product.service';
 
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 templateUrl: 'product.component.html'
 })
 
 export class ProductComponent implements OnInit { constructor(private productService: ProductService) {
 // do simple stuff
 } ngOnInit() {
 // do elaborate stuff this.productDetails = this.productService.getDetails();
 } }

73. More component lifecycle hooks // Pseudo Code import { Component, OnInit, ... } from '@angular/core'; 
 @Component({
 ... })
 
 export class ProductComponent implements OnInit { ngOnInit() ngOnChanges(changes) ngDoCheck() ngOnDestroy() ngAfterContentInit() ngAfterContentChecked() ngAfterViewInit() ngAfterViewChecked() }
74. Services
75. Service = class import { Injectable } from '@angular/core';
 
 @Injectable()
 export class ProductsService {
 
 constructor() {}
 
 }
 // generate new service > ng g s product
76. Service = class import { Injectable } from '@angular/core';
 
 @Injectable()
 export class ProductsService { products = [
 { id: 1, title: 'Arduino' },
 { id: 2, title: 'Raspberry Pi' }
 ];
 
 constructor() {}
 
 getProducts() {
 return this.products;
 }
 
 addProduct(product) {
 this.products.push(product);
 }
 
 }
77. Injecting the service ...
 export class ProductsService { getProducts() {
 return this.products;
 }
 } import { Component, OnInit } from '@angular/core';
 import { ProductsService } from './products.service';
 
 @Component({
 moduleId: module.id,
 selector: 'my-store',
 templateUrl: 'my-store.component.html'
 })
 export class MyStoreComponent implements OnInit { products: Array<any>; constructor(private productsService: ProductsService) {}
 
 ngOnInit() {
 this.products = this.productsService.getProducts();
 }
 } service component inject
78. Providing the service - component level import { Component, OnInit } from '@angular/core';
 import { ProductsService } from './products.service';
 
 @Component({
 moduleId: module.id,
 selector: 'my-store',
 templateUrl: 'my-store.component.html', 
 providers: [ProductsService]
 }) 
 export class MyStoreComponent implements OnInit { products: Array<any>; constructor(private productsService: ProductsService) {}
 
 ngOnInit() {
 this.products = this.productsService.getProducts();
 }
 } service component provide
79. Providing the service - app level // main.ts import { bootstrap } from '@angular/platform-browser-dynamic';
 import { MyStoreComponent } from './app/'; import { ProductsService } from './app/products.service';
 
 bootstrap(MyStoreComponent, [ProductsService]); service app provide
80. http
81. Setting up Http // if angular/http is not installed yet > npm i @angular/http -S
82. Setting up Http // if angular/http is not installed yet > npm i @angular/http -S // main.ts import { HTTP_PROVIDERS } from '@angular/http'; bootstrap(MyStoreComponent, [HTTP_PROVIDERS]);
83. Setting up Http // if angular/http is not installed yet > npm i @angular/http -S // main.ts import { HTTP_PROVIDERS } from '@angular/http'; bootstrap(MyStoreComponent, [HTTP_PROVIDERS]); // service import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'; @Injectable()
 export class ProductsService {
 
 constructor(private http: Http) {} }
84. import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'; @Injectable()
 export class ProductsService {
 
 constructor(private http: Http) { 
 
 } getData(): Observable<any> {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Http GET Rx Observables visualized: http://rxmarbles.com/
85. import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'; @Injectable()
 export class ProductsService {
 
 constructor(private http: Http) { 
 
 } getData(): Observable<any> {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Observables Rx Observables visualized: http://rxmarbles.com/
86. import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'; @Injectable()
 export class ProductsService {
 
 constructor(private http: Http) { this.getData().subscribe( (data) => {
 this.products = data;
 }, (error) => { console.log(error); }); } getData(): Observable<any> {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Subscribe() Rx Observables visualized: http://rxmarbles.com/
87. import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'; @Injectable()
 export class ProductsService {
 
 constructor(private http: Http) { this.getData().subscribe( (data) => {
 this.products = data;
 }, (error) => { console.log(error); }); } getData(): Observable<any> {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Subscribe() Rx Observables visualized: http://rxmarbles.com/
88. Subscribe() import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'; @Injectable()
 export class ProductsService {
 
 constructor(private http: Http) { this.getData().subscribe( (data) => {
 this.products = data;
 }, (error) => { console.log(error); }); } getData(): Observable<any> {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Rx Observables visualized: http://rxmarbles.com/
89. Router
90. E-Store search 4
91. E-Store search 4
92. appRoot my-store header search-bar products-list nav-bar product product product product x Routing Router <router-outlet></router-outlet>
93. Router Component my-store import { Component } from '@angular/core'; import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router'; 
 @Component({
 moduleId: module.id,
 selector: 'my-store',
 templateUrl: 'my-store.component.html', 
 directives: [ROUTER_DIRECTIVES],
 providers: [ROUTER_PROVIDERS]
 }) @Routes([
 
 ])
 export class MyStoreComponent { constructor(private router: Router) {} 
 } Make sure you have all this when using Angular CLI
94. Router Component my-store import { Component } from '@angular/core'; import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router'; import { ProductListComponent } from './+product-list'; import { ProductComponent } from './+product'; 
 @Component({
 moduleId: module.id,
 selector: 'my-store',
 templateUrl: 'my-store.component.html', 
 directives: [ROUTER_DIRECTIVES],
 providers: [ROUTER_PROVIDERS]
 }) @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} 
 }
95. Router Outlet <router-outlet></router-outlet> @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} } my-store
96. Router Links <a [routerLink]="['/products']">All Products</a> <router-outlet></router-outlet> @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} } my-store
97. Router Links <a [routerLink]="['/products']">All Products</a> <a [routerLink]="['/product', productId]"> Product {{ productId }} - {{ productName }}</a> <router-outlet></router-outlet> @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} } my-store
98. Router Links <a [routerLink]="['/products']">All Products</a> <a [routerLink]="['/product', productId]"> Product {{ productId }} - {{ productName }}</a> <button (click)="goToProduct(productId)"> {{ productName }}</button> <router-outlet></router-outlet> @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} goToProduct(id) {
 this.router.navigate(['/product', id]);
 } } my-store
99. Fetching route params import { Component } from '@angular/core'; import { RouteSegment } from '@angular/router';
 @Component({
 moduleId: module.id,
 selector: 'product',
 templateUrl: 'product.component.html', 
 }) 
 export class ProductComponent { selectedId: number; routerOnActivate(currentRoute: RouteSegment) {
 this.selectedId = +currentRoute.getParam('id');
 } 
 } product
100. More about Components: Style
101. styleUrls import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], 
 })
 
 export class ProductComponent {}
102. styles (inline) import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], styles: [ `h1 { background-color: yellow; } button { height: 30px; background-color: aqua; border-radius: 5px; }`, 'button {font-size: 16px;}' ] 
 })
 
 export class ProductComponent {}
103. CSS special selector :host import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], styles: [ ` :host { display: block; padding: 10px; border: 1px solid purple; background-color: yellow; }` ] })
 export class ProductComponent {} // parent component template <product></product> product
104. CSS special selector :host-context() import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], styles: [ ` :host-context(.best-seller) h1 { border: 2px yellow solid; }` ] 
 }) 
 export class ProductComponent {} // parent component template <product></product> product .best-seller h1
105. CSS special selector /deep/ import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], styles: [ ` :host /deep/ h1 { font-style: italic; }` ] }) 
 export class ProductComponent {} // parent component template <product></product> product prod-title h1
106. import { Component, ViewEncapsulation } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], styles: [ `:host /deep/ h1 { font-style: italic; } h1 { border: 1px solid red; }` ], encapsulation: ViewEncapsulation.Emulated }) 
 export class ProductComponent {} // parent component template <product></product> View encapsulation: emulated app style product
107. View encapsulation: native import { Component, ViewEncapsulation } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], styles: [ `:host /deep/ h1 { font-style: italic; } h1 { border: 1px solid red; }` ], encapsulation: ViewEncapsulation.Native }) 
 export class ProductComponent {} // parent component template <product></product> app style product
108. import { Component, ViewEncapsulation } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `<h1>{{ product.title }}</h1>`, styleUrls: ['product.component.css'], styles: [ `:host /deep/ h1 { font-style: italic; } h1 { border: 1px solid red; }` ], encapsulation: ViewEncapsulation.None }) 
 export class ProductComponent {} // parent component template <product></product> View encapsulation: none app style product
109. Questions? Thank You!
110. Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ