``` ### 4.2.2. template: - `template` property denotes writing html markup in current class .ts file only - `template` property can help to write all html/markup in .ts typescript file itself - single line can be written directly: > **Syntax & Example**: ```typescript template: '

Inline single template Heading used - template written in same .ts file

', ``` - multi line html can be written with back-tick ` ` symbol: > **Syntax & Example**: ```typescript template: `

Multiple line template

`, ``` ### 4.2.3. templateUrl: - `templateUrl` denotes/points to an `external .html` file OR - Write html code in another .html file and call the file path with `templateUrl` property (separation of concern) > **Syntax & Example**: ```typescript templateUrl: './app.component.html', // template/templateUrl - html view, ``` > **Syntax & Example**: component-demo2-template.component.ts ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo2-template', templateUrl: './component-demo2-template.component.html', // single line template // template: '

Inline single template para used

', // multi line template template:`

component-demo2-template templateUrl works!

template

template denotes writing html markup in current class file only, template property can help to write all html/markup in .ts typescript file itself.

Multiple line template

`, styleUrls: ['./component-demo2-template.component.css'] }) export class ComponentDemo2TemplateComponent implements OnInit { constructor() { } ngOnInit() { } } ``` ### 4.2.4. styles: - style denotes writing `css style for current component only` - like inline css, - multiple css styles written inside array [ ] and back tick ` ` symbol > **Syntax & Example**: ```typescript styles: [` h1 { text-align:center; } div { border:2px dashed gray; } `] ``` ### 4.2.5. styleUrls: - `styleUrls` denotes external css file used for current component - write css styles in another .css file and `call the file path with styleUrls` property (seperation of concern) > **Syntax & Example**: ```typescript styleUrls: ['./app.component.css'] // styleUrls - css style sheet ``` > **Syntax & Example**: component-demo3-styles.component.ts ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo3-styles', templateUrl: './component-demo3-styles.component.html', //styleUrls: ['./component-demo3-styles.component.css'] styles: [` h1{ text-align:center; } div{ border:2px dashed gray; } `] }) export class ComponentDemo3StylesComponent implements OnInit { constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo1.component.ts ```typescript import { Component, OnInit } from '@angular/core'; @Component({ // 1. selector selector: 'app-component-demo1', // 2. .class selector // selector: '.app-component-demo1', // 3. [attribute] selector // selector: '[app-component-demo1]', templateUrl: './component-demo1.component.html', styleUrls: ['./component-demo1.component.css'] }) export class ComponentDemo1Component implements OnInit { private appName:string = 'Angualr 6 Application'; constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo1.component.html ```html

component-demo1 works!

• {{ appName }}

What is Angular

• Framework to build client side application
• Great for SPAs
• Angular 2/4/5/6/7 frameworks targets Mobile and Desktop.

``` > **Syntax & Example**: app.component.html ```html

``` > **Syntax & Example**: app.component.ts ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // create a property to send from parent to child parentMessage = 'From Parent'; // } ``` > **Syntax & Example**: app.module.ts ```typescript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ComponentDemo1Component } from './componenets/component-demo1/component-demo1.component'; @NgModule({ declarations: [ AppComponent, ComponentDemo1Component, ], imports: [ BrowserModule, ], bootstrap: [AppComponent] }) export class AppModule { } ``` > **Syntax & Example**: styles.css ```css /* You can add global styles to this file, and also import other style files */ /* common global generic styles */ .custom-divider { margin: 30px 0px; border-bottom:2px dashed gray; } h1,h2,h3 { text-transform: uppercase; /* text-transform: capitalize; */ } h2 { text-decoration: underline; } body { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; letter-spacing: 2px; } li { margin: 10px 0px; } input{ padding: 5px; } button { border-radius: 5px; padding: 10px 15px; background-color: teal; border: none; outline: none; cursor: pointer; color: lightcyan; } /* class binding */ .text-primary { color: blue; } .text-danger { color: red; } .text-success { color: lawngreen; } .text-special { font-weight:bold; font-style: italic; color:orchid; } .text-strikethrough { text-decoration: line-through; } ``` > **Syntax & Example**: index.html ```html ```

   

05 Interpolation Data Binding ===================== - Interpolation denotes/evaluates the content inside `{{ }} braces` and displays the value in component view file - Interpolation = expressions, data-binding to text nodes and attribute values - interpolation expression = {{ varName }} or {{ fn_anyReturnFunction() }} - Angular expressions are much like `JavaScript expressions` and they can contain literals, operators, and variables - Data binding in Angular is the `synchronization/communication between the model and the view` - `String interpolation` is used to display dynamic data on HTML template (front end / at user end) - Variable value assignment not possible with interpolation, Example: `{{ name = 'Dinanath' or Total = 10 + 20 }}` > **Syntax & Example**: component-demo4-interpolation.component.ts ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo4-interpolation', templateUrl: './component-demo4-interpolation.component.html', styleUrls: ['./component-demo4-interpolation.component.css'] }) export class ComponentDemo4InterpolationComponent implements OnInit { // variables - class members public technology = 'Angular 6'; public userName = 'Dinanath'; // public siteUrl = 'http://www.google.com'; public siteUrl = window.location.href; fn_showGreetingsToUser() { return 'Welcome ' + this.userName; } fn_showMessage() { return 'Welcome to ' + this.technology + ' ' + this.userName; } constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo4-interpolation.component.html ```html

component-demo4-interpolation works!

• maths = 2+2 = {{ 2+2 }}
• {{ "Welcome " + userName }}
• userName.length = {{ userName.length }}
• toUpperCase = {{ userName.toUpperCase() }}
• toLowerCase = {{ userName.toLowerCase() }}
• current Site URL: {{ siteUrl }}
• function call: {{ fn_showGreetingsToUser() }}
• function call: {{ fn_showMessage() }}

``` > **Syntax & Example**: app.module.ts ```typescript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ComponentDemo1Component } from './componenets/component-demo1/component-demo1.component'; import { ComponentDemo2TemplateComponent } from './componenets/component-demo2-template/component-demo2-template.component'; import { ComponentDemo3StylesComponent } from './componenets/component-demo3-styles/component-demo3-styles.component'; import { ComponentDemo4InterpolationComponent } from './componenets/component-demo4-interpolation/component-demo4-interpolation.component'; import { ComponentDemo5PropertybindingComponent } from './componenets/component-demo5-propertybinding/component-demo5-propertybinding.component'; @NgModule({ declarations: [ AppComponent, ComponentDemo1Component, ComponentDemo2TemplateComponent, ComponentDemo3StylesComponent, ComponentDemo4InterpolationComponent, ], imports: [ BrowserModule, ], bootstrap: [AppComponent] }) export class AppModule { } ``` > **Syntax & Example**: app.component.html ```html

```

   

06 Property Binding ===================== - String Interpolation and Property binding both are used for the same purpose i.e. one-way Data Binding - String Interpolation and Property Binding both `flow value in one direction from our components to HTML elements` - Basic Attributes are defined by HTML BUT `"value"` kind of dynamic attributes (properties) which are like properties are defined and managed by DOM - `Attributes and properties are NOT the same`
- `Attributes` = HTML           |           `Properties` = DOM (Document Object Model) - Attributes initialise DOM properties and then they are done - cannot change once they are initialised - Property values however can change, HTML attribute value specifies initial value and the `DOM value property is the current value` > **Syntax & Example**: Property Binding is done with [square bracket] OR bind-properyName: ```html example: ``` - type in console:$0.getAttribute("value"); output:"dinanath" - type in console:$0.value; output:"dinanath" - Now type something new in text field "new Text" - type in console:$0.getAttribute("value"); output:"dinanath" - type in console:$0.value; output:"new Text" - > **Note**: Attribute does not changed but `value property changed` - `Property Binding done with [ ] square bracket` also with `{{ interpolation }}` But its advisable to use [ ] as its supports string, boolean all property types, boolean value like true/false etc does not works well with {{ interpolation }} > **Syntax & Example**: component-demo5-propertybinding.component.ts ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo5-propertybinding', templateUrl: './component-demo5-propertybinding.component.html', styleUrls: ['./component-demo5-propertybinding.component.css'] }) export class ComponentDemo5PropertybindingComponent implements OnInit { public _id = 'id1'; public _isDisabled1 = true; public _isDisabled2 = false; constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo5-propertybinding.component.html ```html

component-demo5-propertybinding works!

attributes vs value

property binding [ ] vs interpolation {{ ngNonBindable }}

attribute boolean (property) interpolation does not support

property binding boolean values supported

property binding boolean property with variable

property binding with bind-

```

   

07 Class Binding ===================== - Class binding refers to applying different classes normally or depends on condition (dynamically) - Class binding is very important and really useful as it allows developer to apply/add and remove classes to html element dynamically based on condition or user interaction - Class Binding Syntax: ``, here `varName holds css className` - If `[class] binding` and `class=" "` attribute both present in tag, `[class] binding` get first/higher priority and `class=" "` attribute becomes null & void (class style properties not applied to text - so its advisable to use any one either class binding or class attribute) - `[ngClass]` directive/attribute helps to apply multiple classes conditionally ` **Syntax & Example**: styles.css (write css classes in any file) ```css .text-primary { color: blue; } .text-danger { color: red; } .text-success { color: lawngreen; } .text-special { font-weight:bold; font-style: italic; color:orchid; } .text-strikethrough { text-decoration: line-through; } .text-orange { color: orange; } ``` > **Syntax & Example**: component-demo6-classbinding.component.ts ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo6-classbinding', templateUrl: './component-demo6-classbinding.component.html', styleUrls: ['./component-demo6-classbinding.component.css'] }) export class ComponentDemo6ClassbindingComponent implements OnInit { public successClass = 'text-success'; public dangerClass = 'text-danger'; public isSpecialClass = true; public isErrorClass = true; public messageClasses = { 'text-primary': this.isSpecialClass, 'text-strikethrough': this.isSpecialClass } constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo6-classbinding.component.html ```html

component-demo6-classbinding works!

[class]="varName" (varName holds css className present in css)

simple class attribute

This is class binding with []

This is class binding with interpolation

This is class binding with [] also class attribute

This is class binding with boolean variable condition

This is class binding with boolean variable condition

This is ngClass binding to deal with multiple classes at once

```

   

08 Style Binding ===================== - Style binding is similar to class binding but it refers to applying different inline styles to html element instead of applying css classes - Style Binding Syntax: ``` text OR text ``` - `[ngStyle]` directive/attribute helps to apply multiple inline styles ` **Syntax & Example**: component-demo7-stylebinding.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo7-stylebinding', templateUrl: './component-demo7-stylebinding.component.html', styleUrls: ['./component-demo7-stylebinding.component.css'] }) export class ComponentDemo7StylebindingComponent implements OnInit { public greenColor = 'green'; public redColor = 'red'; public orangeColor = 'orange'; public hasError = true; public headerStyles = { color: 'blue', textDecoration: 'line-through', fontStyle: 'italic' } constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo7-stylebinding.component.html ```html

component-demo7-stylebinding works!

<tag [style.color]="'orange'"> text </tag>

applying inline styles

<tag [style.color]="'varName'"> text </tag>

applying inline styles with variable

<style.color]="hasError ? 'red' : 'green' "> text </tag>

applying inline styles with variable conditions

applying multiple inline styles

```

   

09 Event Binding ===================== - Event binding captures any DOM event and performs actions - Angular provides an ability to bind the events along with the methods, Event binding is used with `parenthesis ()` - Usually data binding done from Component Class `.ts` to Component Template `.html` (variables in class .ts files used/bind with html/template .html) - To responds to user events like mouse clicks or keyboard events we need data flow from TEMPLATE to CLASS, event binding flows from TEMPLATE to CLASS (.HTML/TEMPLATE/VIEW to .TS/CLASS file) - Syntax: `

Click Me - Change Style

` > **Syntax & Example**: component-demo8-eventbinding.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo8-eventbinding', templateUrl: './component-demo8-eventbinding.component.html', styleUrls: ['./component-demo8-eventbinding.component.css'] }) export class ComponentDemo8EventbindingComponent implements OnInit { public isButtonClicked = false; public greetingMessage = ''; public eventType = ''; // public withoutHandlerMessage = ''; fn_changeStyles() { this.isButtonClicked = !this.isButtonClicked; this.greetingMessage = 'welcome to event binding'; } fn_checkClick(evt) { console.log(evt); this.eventType = evt.type; } constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo8-eventbinding.component.html ```html

component-demo8-eventbinding works!

Event Binding

Click Me - Change Style

isButtonClicked: {{isButtonClicked}}. | {{isButtonClicked ? greetingMessage : " "}}

Click me! Event: {{eventType}} Without handler function - Click me! {{withoutHandlerMessage}}

```

   

   

10 Template Reference Variables ===================== - When there is a user interaction we may want some data to flow from VIEW/TEMPLATE (.HTML) to the class .TS) to perform some operation - Example: value from input fields to perform some validation etc - To easily access DOM elements and their properties, Template Reference Variables is used - Template Reference Variables is created with #hash symbol followed by var name i.e. `#heading1` - Syntax: `

I am heading 1

`, here `#heading1` is Template Reference Variable (a dynamic name/id) assigned to h1 tag > **Syntax & Example**: component-demo9-templaterefvars.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo9-templaterefvars', templateUrl: './component-demo9-templaterefvars.component.html', styleUrls: ['./component-demo9-templaterefvars.component.css'] }) export class ComponentDemo9TemplaterefvarsComponent implements OnInit { logDetails(_value) { console.log(_value); } constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo9-templaterefvars.component.html ```html

component-demo9-templaterefvars works!

Template Reference Variables

    Get Input Field     Get Value of field    

```

   

11 Two Way Data Binding ===================== - Data binding is one of the most powerful features of Angular, used widely for communication between TypeScript code (.ts - business logic) and different components (.html - view/template) shown to the users - Whenever we work with Input Form fields its necessary/essentials that MODEL (data) and VIEW (template) both syncs well (any changes into HTML field should update the model/property and any updates/changes in model/property/variable than view should reflect those updated values) - There are two types of data binding: 1. One way data binding 2. Two way data binding 11.1. One way data binding --------------------- - One way data binding is a simple/normal one way communication where HTML template is changed when any changes to TypeScript code/model/data/variable - In one way data binding value of Model is used in the View (HTML) but we can't update Model from the View (.HTML Template) - Example: Interpolation / String Interpolation, Property Binding, and Event Binding - One way data binding works from class .ts file to template/view .html file: > **Syntax & Example**: component-demo10-onewaydatabinding.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo10-onewaydatabinding', templateUrl: './component-demo10-onewaydatabinding.component.html', styleUrls: ['./component-demo10-onewaydatabinding.component.css'] }) export class ComponentDemo10OnewaydatabindingComponent implements OnInit { public inputResultValue = 'One Way Data Binding!'; public userNameText = 'Angular 7'; public changeInputText(evt) { console.log(evt); this.userNameText = evt.target.value; } constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo10-onewaydatabinding.component.html ```html

component-demo10-onewaydatabinding works!

One way data binding

One way data binding works from class .ts file to template/view .html file:

One Way Data Binding works as Two way (work around)

   {{userNameText}}

```

   

   

11.2. Two way data binding --------------------- - Two Way Data Binding helps to update the property at the same time displays the value of the property - In two way data binding, `automatic synchronization of data happens between the Model and the View` - Here whenever we make changes in the Model(data/variable) it will be reflected in the View and when you make changes in View(HTML/template) it will be reflected in Model - `"ngModel"` Directive is used to implement Two Way Data Binding (basically VIEW & MODEL should always be sync) - `[ ] square bracket/property binding` is used for data flow from class to the template and `( ) parentheses/event binding` for data from template to class - `[(ngModel)]` - this syntax is known as `[(banana in the box)]` - To use `[(ngModel)]` Directive we must need to `import FormsModule` from `@angular/forms` and also add to imports array in app.module.ts: `import { FormsModule } from '@angular/forms';` - > **Note**: In two way data binding value flow from an Input Text field to the class file and then to view/template file > **Syntax & Example**: app.module.ts ```ts // import forms module for two way data binding import { FormsModule } from '@angular/forms'; imports: [ BrowserModule, FormsModule ], ``` > **Syntax & Example**: component-demo11-twowaydatabinding.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo11-twowaydatabinding', templateUrl: './component-demo11-twowaydatabinding.component.html', styleUrls: ['./component-demo11-twowaydatabinding.component.css'] }) export class ComponentDemo11TwowaydatabindingComponent implements OnInit { public nameText = 'Angular 6'; constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo11-twowaydatabinding.component.html ```html

component-demo11-twowaydatabinding works!

Two way data binding

{{nameText}}

```

   

12 ngIf Directive ===================== - Directives are an `instructions in the DOM`, they specify how to place your components and business logic in the Angular - Directives are js class and `declared as @directive` - There are 3 main types of directives in Angular: 1. **Component Directives** - Component directives are used in `main class (app.component.ts)`. They contain the detail of how the component should be processed, instantiated and used at runtime 2. **Structural Directives** - Structural Directives let us `Add or Remove (Show or Hide) HTML elements` from DOM. Structural directives `start with a * sign`. These directives are used to `manipulate and change the structure of the DOM elements`. For example, *ngIf and *ngFor etc. 3. **Attribute Directives** - Attribute directives `look like a normal HTML Attribute` and mainly used in `databinding and event binding`. Attribute directives are used to `change the look and behavior of the DOM elements`. Attribute Directives affect only the element they are added to. For example: ngClass, ngStyle etc. - Most important/widely used inbuilt Structural directives are: - **ngIf** - conditionally render/show-hide html elements - **ngSwitch** - conditionally render/show-hide html elements - **ngFor** - render/show list of html elements through loop *ngIf --------------------- - *ngIf directive is used to change the output conditionally - If the condition is false, the DOM element does not render - With *ngIf use truthy or falsy value which conditionally renders the DOM elements - `ng-template` is like a container for chunks/group of HTML elements controlled once > **Syntax & Example**: component-demo12-ngif.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo12-ngif', templateUrl: './component-demo12-ngif.component.html', styleUrls: ['./component-demo12-ngif.component.css'] }) export class ComponentDemo12NgifComponent implements OnInit { public isShow=true; public hasDisplay=false; constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo12-ngif.component.html ```html

component-demo12-ngif works!

*ngIf

• Show me
• I am NOT rendered in DOM
• Please show me - conditional variable/property from class

ngIf else ng-template

If condition is false, different DOM element renders as specified in "ng-template else">

I have used in ngIf TRUE part

I am using ngIf FALSE/ELSE part in ng-template

ngIf - ng-template else ng-template

depends on variable/condition show ng-template1 else show other ng-template2

I am #trueTemplate

I am #falseTemplate

```

   

13 ngSwitch Directive ===================== - ngSwitch directive is similar to other programming languages swtich statement, only the `difference is with angular we render HTML elements instead of executing logics` > **Syntax & Example**: component-demo13-ngswitch.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo13-ngswitch', templateUrl: './component-demo13-ngswitch.component.html', styleUrls: ['./component-demo13-ngswitch.component.css'] }) export class ComponentDemo13NgswitchComponent implements OnInit { public curColor='red'; // public curColor='green'; // public curColor = 'blue'; // public curColor = 'black'; constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo13-ngswitch.component.html ```html

component-demo13-ngswitch works!

*ngSwtich

RED | {{curColor}} | color

GREEN | {{curColor}} | color

BLUE | {{curColor}} | color

Default BLACK

```

   

14 ngFor Directive ===================== - ngFor directive is similar to other programming languages for loop statement, only the `difference is with angular we render the list of HTML elements instead of executing logics` > **Syntax & Example**: component-demo14-ngfor.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo14-ngfor', templateUrl: './component-demo14-ngfor.component.html', styleUrls: ['./component-demo14-ngfor.component.css'] }) export class ComponentDemo14NgforComponent implements OnInit { // public arrColors = ['red', 'green', 'blue','cyan','magenta','black']; public arrColors = ['red', 'green', 'blue']; constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo14-ngfor.component.html ```html

component-demo14-ngfor works!

*ngFor

*ngFor Basics

• {{color}}

*ngFor with id and class

• {{color}}

*ngFor with index

• Index is: {{curIndex + 1 }}. {{color}}

*ngFor with index - first / last / even / odd

• {{curIndex}}. {{color}} :--: First Item: {{firstIndex}} :--: Last Item: {{lastIndex}} :--: Odd: {{oddIndex}} :--: Even: {{evenIndex}} :--:

```

   

15 Component Interaction ===================== - Component interact [parent to child and vice versa] with @input() & @output() decorator - **@input() decorator** - Parent component sends data, Child component accepts with @input() decorator `(parent to child component communication with @input() decorator)` - **@output() decorator** - Child component sends data/events, Parent component accepts with @output() decorator `(child to parent component communication with @output() decorator)` - To send data from Child to Parent we need events i.e. create `Events-EventEmitter` 15.1. Parent to child communication with @Input() decorator: ------------------------------ 1. Parent class/.ts file - Create a property or class member/variable, example: `parentMessage = 'From Parent';` 2. Parent view/.html file - In child selector tag use parent variable with property binding for communication, example: `` 3. Child component class/.ts file - Receive data data/value coming from parent component, example: `@Input() public parentData;` 4. Child view/.html file - Bind / Get Parent Data in Child component example: `Hello {{parentData}}` > **Syntax & Example**: parent component - app.component.ts ```ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // create a property to send from parent to child parentMessage = 'From Parent'; } ``` > **Syntax & Example**: parent component - app.component.html ```html ``` > **Syntax & Example**: child component - component-demo15-childparent.component.ts ```ts import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-component-demo15-childparent', templateUrl: './component-demo15-childparent.component.html', styleUrls: ['./component-demo15-childparent.component.css'] }) export class ComponentDemo15ChildparentComponent implements OnInit { // parent to child // receive data data/value coming from parent component @Input() public parentData; // @Input() public parentName; // alias based method // @Input('parentData') public parentName; constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: child component - component-demo15-childparent.component.html ```html

component-demo15-childparent works!

Bind / Get Parent Data in Child component: Hello {{parentData}}

```

   

15.2. Child to parent communication with @Ouput() decorator: ------------------------------ 1. Child component class/.ts file - Create child output event to send to parent by using EventEmitter class 2. Child component class/.ts file - Create child event handler function and emit some events/message 3. Child view/.html file - Create a button element to fire child event handler function 4. Parent view/.html file - In child selector tag capture child event, example: `` 5. Parent view/.html file - Bind the messageChild property in view `Parent component showing message from child component: {{messageChild}}` > **Syntax & Example**: child component - component-demo15-childparent.component.ts ```ts import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-component-demo15-childparent', templateUrl: './component-demo15-childparent.component.html', styleUrls: ['./component-demo15-childparent.component.css'] }) export class ComponentDemo15ChildparentComponent implements OnInit { // parent to child // receive data data/value coming from parent component @Input() public parentData; // @Input() public parentName; // alias based method // @Input('parentData') public parentName; // child to parent // create child event to send to parent @Output() public childEvent = new EventEmitter(); // child event handler function childFireEvent() { this.childEvent.emit("Message from Child to Parent"); } constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: child component - component-demo15-childparent.component.html ```html

component-demo15-childparent works!

Send Child Event to Parent

``` > **Syntax & Example**: parent component - app.component.ts ```ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // create a property to send from parent to child parentMessage = 'From Parent'; // child to parent messageChild; } ``` > **Syntax & Example**: parent component - app.component.html ```html ```

   

16 Pipes ===================== - Pipes (Filters) helps to `transform data before displaying to view` - Pipes (Filters) can be added in AngularJS to format data - Pipes (Filters) is denoted by `piping |` symbol - There are many built-in/default pipes available in angular like: `String related pipes` (uppercase, lowercase), `Number related pipes` (number), `Currency` pipes, `Date` pipes, `JSON` pipes. - We can also create custom pipes as per out requirements with `Pipe, PipeTransform class & transform method` > **Syntax & Example**: component-demo16-pipesfilters.component.ts ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component-demo16-pipesfilters', templateUrl: './component-demo16-pipesfilters.component.html', styleUrls: ['./component-demo16-pipesfilters.component.css'] }) export class ComponentDemo16PipesfiltersComponent implements OnInit { public nameText = 'Angular js'; public messageText = 'Welcome to Angularjs'; public greetingText = 'angular 2/4/5/6 is component based'; public objTechnology = { 'firstName': 'angular', 'lastName': 'js', 'version': 6.0 } public number1 = 5.786; public currentDate = Date(); constructor() { } ngOnInit() { } } ``` > **Syntax & Example**: component-demo16-pipesfilters.component.html ```html

component-demo16-pipesfilters works!

pipes

String based Pipes : Format string

uppercase: {{ nameText | uppercase }}
lowercase: {{ messageText | lowercase }}
titlecase: {{ greetingText | titlecase }}
slice:start:end (not including that letter): {{ greetingText | slice:8}}
slice:start:end (not including that letter): {{ greetingText | slice:14:15}}

JSON Pipes - Shows json representation of an object

json: {{ objTechnology | json }}

Number Pipes - Format Number, Integers

number (min integer digit. min decimal digit - max decimal digit): {{ 5.29898 | number:"1.2-3" }}
number (min integer digit. min decimal digit - max decimal digit): {{ 5.29898 | number:"2.2-2" }}
percent: {{ 0.29898 | percent }}

Currency Pipes - Transform Currency values

currency: {{ 0.29898 | currency }}
currency: {{ 0.29898 | currency:'Rs.' }}
currency: {{ 0.29898 | currency:'GBP' }}
currency: {{ 0.29898 | currency:'GBP':'code' }}

Date Pipes - Transform Date

Date: {{ currentDate }}
date:short: {{ currentDate | date:'short' }}
date:shortDate: {{ currentDate | date:'shortDate' }}
date:shortTime: {{ currentDate | date:'shortTime' }}

date:medium: {{ currentDate | date:'medium' }}
date:mediumDate: {{ currentDate | date:'mediumDate' }}
date:mediumTime: {{ currentDate | date:'mediumTime' }}

date:long: {{ currentDate | date:'long' }}
date:longDate: {{ currentDate | date:'longDate' }}
date:longTime: {{ currentDate | date:'longTime' }}

```

   

17 Services ===================== - Programming Principles: - **DRY** - Do not repeat yourself (DRY) - Avoid making copies of data in different files. (example: List & Details components using same employee object created twice in respective class file) - **SRP** - Single Responsibility Principles (one class/function should perform one task/responsibility) - **KISS** - Keep It Simple Stupid! - Service is a class with a specific purpose and widely used to: - Share data - Between multiple pages/components - Implement application logic - Calculations, Repeatative tasks/functionalities etc. - External Interaction - Database connectivity - Services are a great and awesome way to share information among multiple classes/components, just create a service and inject it in respective classes/components 18 Dependency Injection DI ===================== - Drawback of code without Dependency Injection (DI): - Code is not flexible - If main code (dependencies) changed we need to check and change our code - Code is not suitable for testing - Dependency Injection (DI) as a design pattern - Dependency Injection DI is a coding pattern/standard in which a class receives its required dependencies from external sources rather than creating them itself to avoid tight coupling - Dependency Injection (DI) as a Framework - Register all dependencies with Injector a central place/container - 3 steps involved to create and use service in angular: 1. Define the Service class 2. Register with Injector 3. Declare as a dependency in List and Details both component - `@Injectable()` decorator tells angular that this service might itself have injected dependencies 19 Using a Service ===================== - 3 steps involved to create and use service in angular: 1. Define the Service class 2. Register with Injector 3. Declare as a dependency in List and Details both component   1.Define the Service class --------------------- 1. Create service (which is responsible for providing employee data) with the command `"ng g s employee"` OR `"ng generate service employee"` > **Syntax & Example**: employee.service.ts ```ts import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class EmployeeService { // 1.1. create a new method which holds employee data getEmployees() { return [ { 'id': 1, 'name': 'Amitabh', 'age': 75, 'city': 'Alahabad' }, { 'id': 2, 'name': 'Akshay', 'age': 55, 'city': 'Delhi' }, { 'id': 3, 'name': 'RajaniKanth', 'age': 73, 'city': 'Chennai' }, { 'id': 4, 'name': 'Rajesh Khanna', 'age': 85, 'city': 'Kolkatta' } ] } constructor() { } } ``` 2.Register with Injector --------------------- 2. Register with Injector in app module file `'app.module.ts'` > **Syntax & Example**: app.module.ts ```ts // 2.1. import custom created service to Register with Injector import { EmployeeService } from './services/employee.service'; // 2.2. import service in providers its compulsion to insert services in the provider's array providers: [ EmployeeService ] ``` 3.Declare as a dependency in both List and Details component --------------------- 3. import service in necessary component files - Declare as dependency in constructor employee-list.component.ts & employee-details.component.ts > **Syntax & Example**: component-demo191-serviceemployeelist.component.ts & component-demo192-serviceemployeedetails.component.ts ```ts import { Component, OnInit } from '@angular/core'; // 3.1. import service in necessary component files - Declared as dependency import { EmployeeService } from '../../services/employee.service'; @Component({ selector: 'app-component-demo191-serviceemployeelist', templateUrl: './component-demo191-serviceemployeelist.component.html', styleUrls: ['./component-demo191-serviceemployeelist.component.css'] }) export class ComponentDemo191ServiceemployeelistComponent implements OnInit { // 3.3. define an empty local employees array which will hold employees data after service all public employees = []; // 3.2. refer to service with local variable as dependency in constructor constructor(private employeeService: EmployeeService) { } ngOnInit() { // 3.4. on component initialization get values from service method this.employees = this.employeeService.getEmployees(); } } ``` 4.Add Markup and bind required data in template/view - employee-list.component.html (component-demo191-serviceemployeelist.component.html) file: --------------------- > **Syntax & Example**: ```html

Employee list:

• {{employee.id}} {{employee.name}}

``` 5.Add Markup and bind required data in template/view - employee-details.component.html file: component-demo192-serviceemployeedetails.component.html --------------------- > **Syntax & Example**: ```html

component-demo192-serviceemployeedetails works!

Employee Details list:

• {{employee.id}} {{employee.name}} {{employee.age}} {{employee.city}}

```

   

   

20 HTTP and Observables ===================== - Http services are used to fetch the data from web server (instead of using hard coded data/json files) 20.1. Http Mechanism: --------------------- 1. Send http request 2. Receive and process http response ### Request: Component file calls -> Service -> Get -> HTTP -> request -> server (DB) ### Response: Component file calls <- Service (cast data) <- Observable <- HTTP <- response <- server (DB) ### Observables: The response/results/returns which we get from the HTTP call is nothing but an Observables. The service needs to cast Observables into an Array/Object and then pass to the required components. 20.2. What exactly are Observables? --------------------- - A sequence of data/items that arrive asynchronously over time - HTTP Call = Single item and Single item = HTTP response - Observables are HTTP response which arrives asynchronously 20.3. HTTP, Observables, and RxJS: --------------------- - 4 steps to fetch data from HTTP & observables: 1. HTTP Get request from service 2. Receive the observable and cast it into an array/Object 3. Subscribe to the observable from List and Details component class 4. Assign the received array/Object to a local variable 20.4. RxJS --------------------- - Reactive Extensions for JavaScript - External library to work with Observables - No-where related to ReactJS library from Facebook 21 Fetch Data Using HTTP and Observables ===================== - Http & HttpClientModule: - Till Angular 4 - Http module used - In Angular 5 - HttpClientModule used (HttpClientModule provides simplified APIs to work with http functionality) - We know an Observables are return as result of a http call, to handle an exceptions on observables we make a use of 'catch' operator

- 4 steps to fetch data from http & observables: 1. HTTP Get request from service 2. Receive the observable and cast it into an array/Object 3. Subscribe to the observable from List and Details component class 4. Assign the received array/Object to local variable - create a custom service to handle http data with command: ng g s employeeHttp 1.HTTP Get request from service --------------------- > **Syntax & Example**: 1. app.module.ts ```ts // import HttpClientModule and add to imports array // 1a. import HttpClientModule import { HttpClientModule } from '@angular/common/http' // 1b. add to imports array imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule ], // 1c. import custom created service Register with Injector import { EmployeeHttpService } from './employee-http.service'; // import service in providers providers: [EmployeeService, EmployeeHttpService], ``` 2.Receive the observable and cast it into an array/Object --------------------- > **Syntax & Example**: 2. employee-http.service.ts ```ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { IEmployee } from '../models/iemployee'; @Injectable({ providedIn: 'root' }) export class EmployeehttpService { // 2c. create json data file private jsonUrl:string= "/assets/data/employees.json"; // 2a. create local variable for HttpClient as DI constructor(private httpClient: HttpClient) { } // 2b. http get getEmployees(): Observable { return this.httpClient.get(this.jsonUrl); } } /* // 2a. create local variable for HttpClient as DI constructor(private _HttpClient:HttpClient) { } import { HttpClient } from '@angular/common/http'; // 2b. in a getEmployees method make get request // getEmployees(){ // return this._HttpClient.get(_jsonUrl); // } // 2b. http get getEmployees():Observable{ return this._HttpClient.get(this._jsonUrl); } // 2c. create json data file private _jsonUrl:string= "/assets/data/employees.json"; // import model/interface file import { IEmployee } from './employee-model-interface'; import { Observable } from 'rxjs/Observable'; */ ``` > **Syntax & Example**: 3. ceate employees.json data file inside assets/data folder ```json [ { "id": 1, "name": "Amitabh", "age": 75, "city": "Alahabad" }, { "id": 2, "name": "Akshay", "age": 55, "city": "Delhi" }, { "id": 3, "name": "RajaniKanth", "age": 73, "city": "Chennai" }, { "id": 4, "name": "Rajesh Khanna", "age": 85, "city": "Kolkatta" } ] [ {"id":1, "name":"Ratan Tata", "age":75}, {"id":2, "name":"Adi Godrej", "age":65}, {"id":3, "name":"K M Birla", "age":55}, {"id":4, "name":"Laxmi Mittal", "age":58}, {"id":5, "name":"Chanda Kochar", "age":50}, {"id":6, "name":"Amitabh B", "age":76} ] ``` > **Syntax & Example**: 4. create IEmployee.ts an employee model/interface file to store exact data types and rules ```ts export interface IEmployee { id:number; name:string; age:number } ``` 3.Subscribe to the observable from List and Details component class
4.Assign the received array/Object to local variable --------------------- > **Syntax & Example**: 3. employee-http-list.component.ts ```ts import { Component, OnInit } from '@angular/core'; import { EmployeehttpService } from '../services/employeehttp.service'; @Component({ selector: 'app-component-demo211-httpemployeelist', templateUrl: './component-demo211-httpemployeelist.component.html', styleUrls: ['./component-demo211-httpemployeelist.component.css'] }) export class ComponentDemo211HttpemployeelistComponent implements OnInit { public employees = []; constructor(private employeehttpService: EmployeehttpService) { } ngOnInit() { // on component initialization get value from http subscribe // data =>: argument of the function // this.employees = data: body of the function // subscribe: to receive data this.employeehttpService.getEmployees().subscribe(data => this.employees = data) } } ``` > **Syntax & Example**: component-demo211-httpemployeelist.component.html ```html

component-demo211-httpemployeelist works!

HTTP Services and Observables

Employee HTTP Observables list:

• {{employee.id}} {{employee.name}}

``` > **Syntax & Example**: component-demo212-httpemployee-details.component.html ```html

component-demo212-httpemployee-details works!

Employee HTTP Observables Details list:

• {{employee.id}} {{employee.name}} {{employee.age}} {{employee.city}}

```

   

   

22 Creating Custom Directives ===================== - We know that Directives are an `instructions in the DOM`, they specify how to place your components and business logic in the Angular - There are many inbuilt structural directives like `ngIf`, `ngSwitch` and `ngFor` used widely in angular - We can also create custom directives to implement some common logic/functionality (not existing) as a class `declared as @directive` Let's create a custom attribute directive to highlight text with blue color & italic style --------------------- 1. The command to create directive: `ng generate directive name` OR `ng g directive name`. 1. In the current app, we want to create all custom directives under `directives` folder so use command as: `ng generate directive directives/blueHighlight` 2. The above command will generate and update the following: ``` CREATE src/app/directives/blue-highlight.directive.spec.ts (253 bytes) CREATE src/app/directives/blue-highlight.directive.ts (155 bytes) UPDATE src/app/app.module.ts (4690 bytes) ``` > **Syntax & Example**: app.module.ts will be updated automatically with new directive entry ```ts // 22. directives - import custom created directives import { BlueHighlightDirective } from './directives/blue-highlight.directive'; declarations: [ BlueHighlightDirective ], ``` 2. Once directive created, in `blue-highlight.directive.ts` assign/change selector name from `appBlueHighlight` to `"blueHighlight"` or so. 1. Open any component html file and use `"blueHighlight"` directive as a attribute (i am trying in app.component.html): `

Hello World! I am custom directive

` 2. To target, get or capture the current html element we can import and use `ElementRef` and `nativeElement` utilities 3. Directives called before the element is rendered so it's advisable to perform all content related actions inside `ngOnInit()` life cycle hook > **Syntax & Example**: blue-highlight.directive.ts ```ts import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[blueHighlight]' }) export class BlueHighlightDirective { constructor(private elem:ElementRef) { console.log('current Element:', elem); // elem.nativeElement.innerText= 'Dynamic text innerHTML'; elem.nativeElement.style.color = `#0000ff`; elem.nativeElement.style.fontStyle = 'italic'; elem.nativeElement.style.backgroundColor = '#c7c7ff'; } } ``` > **Syntax & Example**: app.component.html ```html

22 Hello World! Lets learn custom directive

I am custom directive

The command to create directive: `ng generate directive blueHighlight` OR `ng g directive blueHighlight`. In current app we want to create all custom directives under `directives` folder so use command as: `ng generate directive directives/blueHighlight`. Above command will Genreate and Update following:

CREATE src/app/directives/blue-highlight.directive.spec.ts (253 bytes)
CREATE src/app/directives/blue-highlight.directive.ts (155 bytes)
UPDATE src/app/app.module.ts (4690 bytes)

```

   

   

   

23 Custom Directives with Events and HostListener ===================== - In Angular, the `@HostListener() function decorator` allows you to handle events of the host element in the directive class - `@HostListener Decorator` declares a DOM event to listen for, and provides a handler method to run when that event occurs - Basic syntax of @Hostlistener is: - `@Hostlistener('eventName',[args])` OR `@Hostlistener('target:EVENT',[args])` - **eventName**: The CSS event to listen for - **args**: A set of arguments to pass to the handler method when the event occurs Let's create a custom attribute directive to highlight text and also have a click event --------------------- 1. The command to create directive: `ng generate directive name` OR `ng g directive name`. 1. In the current app, we want to create all custom directives under `directives` folder so use command as: `ng generate directive directives/highlightClick` 2. The above command will generate and update the following: ``` CREATE src/app/directives/highlight-cilck.directive.spec.ts (257 bytes) CREATE src/app/directives/highlight-cilck.directive.ts (157 bytes) UPDATE src/app/app.module.ts (4855 bytes) ``` > **Syntax & Example**: app.module.ts will be updated automatically with new directive entry ```ts /// 23. directives - import custom created directives import { HighlightCilckDirective } from './directives/highlight-cilck.directive'; declarations: [ HighlightCilckDirective ], ``` 2. Once directive created, in `highlight-cilck.directive.ts` assign/change selector name from `appHighlightCilck` to `"highlightCilck"` or so. 1. Open any component html file and use `"highlightCilck"` directive as a attribute (i am trying in app.component.html): `

Hello World! I am custom directive with Click

` 2. To target, get or capture the current html element we can import and use `ElementRef` and `nativeElement` with `@HostListener` utilities > **Syntax & Example**: blue-highlight.directive.ts ```ts import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[highlightCilck]' }) export class HighlightCilckDirective { constructor(private elem: ElementRef) { console.log('current Element:', elem); // elem.nativeElement.innerText= 'Dynamic text innerHTML'; elem.nativeElement.style.color = `#ff0000`; elem.nativeElement.style.backgroundColor = '#ffd5d5'; elem.nativeElement.style.cursor = 'pointer'; } // element click event - @Hostlistener('eventName',[args]) @HostListener('click') showAlert() { window.alert('Custom Directive - @HostListener events!'); } // use global objects like document/window click - @Hostlistener('target:EVENT',[args]) // @HostListener('document:click', ['$event']) // showElementClicked(elem) { // window.alert('Document Clicked'); // } } ``` > **Syntax & Example**: app.component.html ```html

23 Hello World! Lets learn custom directive with click

I am custom directive

The command to create directive: `ng generate directive highlightCilck` OR `ng g directive highlightCilck`. In current app we want to create all custom directives under `directives` folder so use command as: `ng generate directive directives/highlightCilck`. Above command will Genreate and Update following:

CREATE src/app/directives/blue-highlight.directive.spec.ts (253 bytes)
CREATE src/app/directives/blue-highlight.directive.ts (155 bytes)
UPDATE src/app/app.module.ts (4690 bytes)

```

   

24 Creating Custom Pipes ===================== - We learnt that Pipes (Filters) helps to `transform data before displaying to view`, `format the data` - There are many inbuilt pipes like `uppercase`, `number`, `currency` and `date` used widely in angular to transform data - We can also create custom pipes as per our requirements with `Pipe, PipeTransform class & transform method` Let's create a custom pipe to get the square root of the given number --------------------- 1. Inside `app/pipes` folder create a new .ts file named `squareRootPipe.ts` 2. In `squareRootPipe.ts` to create a custom pipe we need to import `Pipe, PipeTransform class from @angular/core and also use transform method` 3. Also in the `@Pipe directive` we have to give the name to the current pipe, which will be used in the .html file, like `name: 'squareRootPipe'` 4. In `app.module.ts` file import and add in declarations `squareRootPipe.ts` as it's created manually * To create a pipe using angular CLI: - `syntax`: ng generate pipe pipeName OR ng generate pipe path/pipeName - `command`: ng generate pipe pipes/reversText * The above command will generate pipe `reversTextPipe.ts` with `@Pipe` decorator, implements `PipeTransform` and also update the src/app/app.module.ts with necessary imports entries > **Syntax & Example**: squareRootPipe.ts ```ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'squareRootPipe' }) export class SquareRootPipe implements PipeTransform { transform(curValue: number): number { return Math.sqrt(curValue); } } ``` > **Syntax & Example**: app.module.ts ```ts // 24. pipes - import custom created pipes import { SquareRootPipe } from './pipes/squareRootPipe'; declarations: [ SquareRootPipe ], ``` > **Syntax & Example**: app.component.html ```html

24 Lets learn custom pipe to format/transform data

• Square Root of 81 is: {{ 81 | squareRootPipe }}
• Square Root of 100 is: {{ 100 | squareRootPipe }}

```