Tweet
Tweet

Slide 1

Slide 1 text

Angular 2: Getting Started Shmuela Jacobs Campus TLV, 31.5.2016

Slide 2

Slide 2 text

Shmuela Jacobs - ng-ninja by day - Octo-Kitten by evening - vegan Goblin by night Sr. Web Developer @ 500Tech

Slide 3

Slide 3 text

http://www.meetup.com/Angular-AfterHours/

Slide 4

Slide 4 text

http://redux-book.com

Slide 5

Slide 5 text

ReactNext 2016 September 15 Dan Panorama, Tel Aviv http://react-next.com

Slide 6

Slide 6 text

• Intro to Angular 2 • TypeScript • App architecture • Components • Built-in Directives • Services • Http • Routing

Slide 7

Slide 7 text

Angular 2 https://angular.io https://github.com/angular/angular

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

JavaScript + Types TypeScript ES6 (ES-2015) JavaScript (ES5) • type checking
 string, number, boolean, any, Array • custom types - interfaces • code help - intellisense • decorators • and more... Typescript: Angular 2's Secret Weapon - Dan Wahlin ng-conf 2016: https://youtu.be/e3djIqAGqZo

Slide 10

Slide 10 text


 
 
 
 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

Slide 11

Slide 11 text

interface Animal {
 age: number,
 children: Array,
 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

Slide 12

Slide 12 text

http://www.typescriptlang.org

Slide 13

Slide 13 text

Setting up the environment

Slide 14

Slide 14 text

https://cli.angular.io https://youtu.be/wHZe6gGI5RY option #1

Slide 15

Slide 15 text

option #2 https://github.com/angular/angular2-seed

Slide 16

Slide 16 text

App Architecture

Slide 17

Slide 17 text

E-Store search 4

Slide 18

Slide 18 text

E-Store search 4

Slide 19

Slide 19 text

E-Store search 4 
 E-Store
 
 
 
 4 
 
 
 


 
 search





    

  • 
 


    Product Title

    
 
     

  • ...
    • 




 appRoot my-store header search-bar products-list nav-bar product product product product x

Slide 20

Slide 20 text

appRoot my-store header search-bar products-list nav-bar product product product product x Component tree

Slide 21

Slide 21 text

appRoot my-store header search-bar products-list nav-bar product product product product x Component tree ( output ) [ input ]

Slide 22

Slide 22 text

appRoot my-store header search-bar products-list nav-bar product product product product x Change Detection product name changed

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Component Template > Controller { } Style {CSS}

Slide 25

Slide 25 text

Component Template > Controller { } Style {CSS} Hi She Codes!

Hi {{name}}!

name = 'She Codes'; h1 { color: red }

Slide 26

Slide 26 text

Component Template > Controller { } Directive { } Component > + { } Service { } Style {CSS} Hi She Codes!

Hi {{name}}!

name = 'She Codes'; h1 { color: red }

Slide 27

Slide 27 text

appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide Services

Slide 28

Slide 28 text

appRoot my-store header search-bar products-list nav-bar product product product shopping cart service product x inject provide provide Services

Slide 29

Slide 29 text

appRoot my-store header search-bar products-list nav-bar product product product product x Services product service

Slide 30

Slide 30 text

appRoot my-store header search-bar products-list nav-bar product product product product x Routing

Slide 31

Slide 31 text

E-Store search 4

Slide 32

Slide 32 text

E-Store search 4

Slide 33

Slide 33 text

appRoot my-store header search-bar products-list nav-bar product product product product x Routing Router

Slide 34

Slide 34 text

Break Angular 2 Project Setup With Angular CLI Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ

Slide 35

Slide 35 text

Components

Slide 36

Slide 36 text

appRoot my-store header search-bar products-list nav-bar product product product product x Component tree

Slide 37

Slide 37 text

Bootstrapping the root component // main.ts import { bootstrap } from '@angular/platform-browser-dynamic';
 import { MyStoreComponent } from './app/';
 
 bootstrap(MyStoreComponent);
 // index.html 
 
 
 
 
 
 System.import('system-config.js').then(function () {
 System.import('main');
 }).catch(console.error.bind(console));


Slide 38

Slide 38 text

Module Component Template > Controller { } Directive { } Component > + { } Service { } Style {CSS}

Slide 39

Slide 39 text

Bootstrapping the root component // main.ts import { bootstrap } from '@angular/platform-browser-dynamic';
 import { MyStoreComponent } from './app/';
 
 bootstrap(MyStoreComponent);
 // index.html 
 
 
 
 
 
 System.import('system-config.js').then(function () {
 System.import('main');
 }).catch(console.error.bind(console));


Slide 40

Slide 40 text

Bootstrapping the root component // main.ts import { bootstrap } from '@angular/platform-browser-dynamic';
 import { MyStoreComponent } from './app/';
 
 bootstrap(MyStoreComponent);
 // index.html 
 
 
 
 
 
 System.import('system-config.js').then(function () {
 System.import('main');
 }).catch(console.error.bind(console));


Slide 41

Slide 41 text

Basic component import { Component } from '@angular/core';
 
 @Component({ 
 selector: 'my-store',
 templateUrl: './app/my-store.component.html', 
 }) 
 export class MyStoreComponent {}
 my-store

Slide 42

Slide 42 text

Basic component import { Component } from '@angular/core'; 
 
 @Component({ moduleId: module.id,
 selector: 'my-store',
 templateUrl: 'my-store.component.html'
 }) 
 export class MyStoreComponent {}
 my-store

Slide 43

Slide 43 text

Basic component import { Component } from '@angular/core'; 
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '

Welcome!

' 
 }) 
 export class MyStoreComponent {}
 my-store

Slide 44

Slide 44 text

Basic component import { Component } from '@angular/core'; 
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '

Welcome!

', styleUrls: ['product.component.css']
 }) 
 export class MyStoreComponent {}
 my-store

Slide 45

Slide 45 text

Using child component my-store import { Component } from '@angular/core'; import { ProductComponent } from './product/product.component';
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '', directives: [ProductComponent]
 }) 
 export class MyStoreComponent {}


Slide 46

Slide 46 text

Using child component import { Component } from '@angular/core'; import { ProductComponent } from './product;
 
 @Component({ moduleId: module.id,
 selector: 'my-store', template: '', directives: [ProductComponent]
 }) 
 export class MyStoreComponent {}
 // product/index.ts - barrel export { ProductComponent } from './action.component'; my-store

Slide 47

Slide 47 text

Basic component import { Component } from '@angular/core';
 
 @Component({ 
 selector: 'product',
 templateUrl: 'app/product/product.component.html'
 })
 export class ProductComponent {}
 // parent component template product my-store // generate new component > ng g c product

Slide 48

Slide 48 text

Basic component import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 templateUrl: 'product.component.html'
 })
 
 export class ProductComponent {}
 // parent component template product my-store // generate new component > ng g c product

Slide 49

Slide 49 text

Basic component import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


Hello World!

`
 })
 
 export class ProductComponent {}
 product // generate new component > ng g c product

Slide 50

Slide 50 text

Binding to controller member import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ title }}

`
 })
 
 export class ProductComponent { title = 'Hello World!'; }
 product // generate new component > ng g c product

Slide 51

Slide 51 text

Binding to controller method import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ getTitle() }}

`
 })
 
 export class ProductComponent { 
 getTitle() {
 return 'Hello World!';
 } }
 product // generate new component > ng g c product

Slide 52

Slide 52 text

Class members and methods import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ getTitle() }}

`
 })
 
 export class ProductComponent { title = 'Hello World!'; 
 getTitle() {
 return this.title;
 } getTitle2() {
 return this.getTitle();
 } }
 product

Slide 53

Slide 53 text

Typings import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ getTitle() }}

`
 })
 
 export class ProductComponent { title: string = 'Hello World!'; 
 getTitle(): string {
 return this.title;
 } }
 product

Slide 54

Slide 54 text

Passing input import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ title }}

`, inputs: ['title']
 })
 
 export class ProductComponent { title: string; }
 // parent component template 
 product my-store [ input ]

Slide 55

Slide 55 text

Binding input import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ title }}

`, inputs: ['title']
 })
 
 export class ProductComponent { title: string; }
 // parent component template 
 
 // parent component controller productTitle ='Hello World!'; product my-store [ input ]

Slide 56

Slide 56 text

Binding input import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ product.title }}

`, inputs: ['product']
 })
 
 export class ProductComponent { product: any; }
 // parent component template 
 
 // parent component controller productToDisplay = { title: 'Hello World!' }; product my-store [ input ]

Slide 57

Slide 57 text

Binding to element property import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ product.title }}

`, inputs: ['product']
 })
 
 export class ProductComponent { product: any; }
 // parent component template 
 
 // parent component controller productToDisplay = { title: 'Hello World!', color: 'red' }; product my-store [ input ]

Slide 58

Slide 58 text

Catching events import { Component } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ product.title }}


 Change Color`, inputs: ['product']
 })
 
 export class ProductComponent { product: any;
 
 changeColor() {
 this.product.color = 'blue'; } }
 // parent component template
 
 // parent component controller productToDisplay = { title: 'Hello World!', color: 'red' }; product my-store ( output ) button

Slide 59

Slide 59 text

Emitting events import { Component, EventEmitter } from '@angular/core';
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `


{{ product.title }}


 Green Blue`, inputs: ['product'], outputs: ['color']
 })
 
 export class ProductComponent { product: any; 
 color = new EventEmitter();
 
 changeColor(chosenColor) {
 this.color.emit(chosenColor);
 } }
 product ( output ) my-store

Slide 60

Slide 60 text

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: ` `, directives: [ProductComponent]
 })
 export class MyStoreComponent { productToDisplay = { title: 'Hello World!', color: 'red' };
 
 changeProductColor(event) {
 this.productToDisplay.color = event;
 } } product ( output ) my-store

Slide 61

Slide 61 text

Built-in Directives

Slide 62

Slide 62 text

ng-if *ngIf

{{ product.title }}
 - Love it! 


Slide 63

Slide 63 text

ng-show / ng-hide [hidden]

{{ product.title }}
 - Love it! 


Slide 64

Slide 64 text


 ng-repeat *ngFor

Slide 65

Slide 65 text

ng-model [(ngModel)]

{{ product.title }}

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Submit Template reference variables

Slide 68

Slide 68 text

Submit Template reference variables

Slide 69

Slide 69 text

More about Components: Lifecycle

Slide 70

Slide 70 text

constructor import { Component } from '@angular/core'; 
 
 
 @Component({
 moduleId: module.id,
 selector: 'product',
 templateUrl: 'product.component.html'
 })
 
 export class ProductComponent { constructor() {
 // do simple stuff
 } }


Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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();
 } }


Slide 73

Slide 73 text

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() }

Slide 74

Slide 74 text

Services

Slide 75

Slide 75 text

Service = class import { Injectable } from '@angular/core';
 
 @Injectable()
 export class ProductsService {
 
 constructor() {}
 
 }
 // generate new service > ng g s product

Slide 76

Slide 76 text

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);
 }
 
 }

Slide 77

Slide 77 text

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; constructor(private productsService: ProductsService) {}
 
 ngOnInit() {
 this.products = this.productsService.getProducts();
 }
 } service component inject

Slide 78

Slide 78 text

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; constructor(private productsService: ProductsService) {}
 
 ngOnInit() {
 this.products = this.productsService.getProducts();
 }
 } service component provide

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

http

Slide 81

Slide 81 text

Setting up Http // if angular/http is not installed yet > npm i @angular/http -S

Slide 82

Slide 82 text

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]);

Slide 83

Slide 83 text

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) {} }

Slide 84

Slide 84 text

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 {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Http GET Rx Observables visualized: http://rxmarbles.com/

Slide 85

Slide 85 text

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 {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Observables Rx Observables visualized: http://rxmarbles.com/

Slide 86

Slide 86 text

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 {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Subscribe() Rx Observables visualized: http://rxmarbles.com/

Slide 87

Slide 87 text

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 {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Subscribe() Rx Observables visualized: http://rxmarbles.com/

Slide 88

Slide 88 text

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 {
 return this.http.get('https://myData.com/products')
 .map(response => {
 return response.json();
 });
 } } Rx Observables visualized: http://rxmarbles.com/

Slide 89

Slide 89 text

Router

Slide 90

Slide 90 text

E-Store search 4

Slide 91

Slide 91 text

E-Store search 4

Slide 92

Slide 92 text

appRoot my-store header search-bar products-list nav-bar product product product product x Routing Router

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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) {} 
 }

Slide 95

Slide 95 text

Router Outlet @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} } my-store

Slide 96

Slide 96 text

Router Links All Products @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} } my-store

Slide 97

Slide 97 text

Router Links All Products Product {{ productId }} - {{ productName }} @Routes([
 {path: '/products', component: ProductListComponent},
 {path: '/product/:id', component: ProductComponent}
 ])
 export class MyStoreComponent { constructor(private router: Router) {} } my-store

Slide 98

Slide 98 text

Router Links All Products Product {{ productId }} - {{ productName }} {{ productName }} @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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

More about Components: Style

Slide 101

Slide 101 text

styleUrls import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, styleUrls: ['product.component.css'], 
 })
 
 export class ProductComponent {}

Slide 102

Slide 102 text

styles (inline) import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, 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 {}

Slide 103

Slide 103 text

CSS special selector :host import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, styleUrls: ['product.component.css'], styles: [ ` :host { display: block; padding: 10px; border: 1px solid purple; background-color: yellow; }` ] })
 export class ProductComponent {} // parent component template product

Slide 104

Slide 104 text

CSS special selector :host-context() import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, styleUrls: ['product.component.css'], styles: [ ` :host-context(.best-seller) h1 { border: 2px yellow solid; }` ] 
 }) 
 export class ProductComponent {} // parent component template product .best-seller h1

Slide 105

Slide 105 text

CSS special selector /deep/ import { Component } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, styleUrls: ['product.component.css'], styles: [ ` :host /deep/ h1 { font-style: italic; }` ] }) 
 export class ProductComponent {} // parent component template product prod-title h1

Slide 106

Slide 106 text

import { Component, ViewEncapsulation } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, 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 View encapsulation: emulated app style product

Slide 107

Slide 107 text

View encapsulation: native import { Component, ViewEncapsulation } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, 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 app style product

Slide 108

Slide 108 text

import { Component, ViewEncapsulation } from '@angular/core'; 
 @Component({
 moduleId: module.id,
 selector: 'product',
 template: `

{{ product.title }}

`, 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 View encapsulation: none app style product

Slide 109

Slide 109 text

Questions? Thank You!

Slide 110

Slide 110 text

Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ