ATTRIBUTE BINDING

// Imports
import { Component } from "@angular/core";

// Decorator
@Component({
selector: "app-root",
template: `
<img [src]="imageUrl" />
<table>
<tr>
<td [attr.colspan]="colSpan"></td>
</tr>
</table>

<button class="btn btn-primary">Click</button>

`
})

// Class
export class AppComponent {
title = "A M Sarsimaz's Class ";
imageUrl = "http://lorempixel.com/400/200";
colSpan = 2;
}

CLASS BINDING

// Imports
import { Component } from "@angular/core";

// Decorator
@Component({
selector: "app-root",
template: `
<button class="btn btn-primary m-2" [class.active]="isActive">Click</button>
<button class="btn btn-primary m-2">Click</button>
`
})

// Class
export class AppComponent {
isActive = true;
}
STYLE BINDING

// Imports
import { Component } from "@angular/core";

// Decorator
@Component({
selector: "app-root",
template: `
<button
class="btn btn-primary m-2"
[style.backgroundColor]="isActive ? 'blue' : 'red'"
[style.fontSize]="size"

>
Click
</button>
`
})
export class AppComponent {
isActive = false;
size = 29;
}

For more styles navigate to google and search ‘dom style object properties’

EVENT BINDING

// Imports
import { Component } from "@angular/core";

// Decorator
@Component({
selector: "app-root",
template: `
<button (click)="onSave()">
Click
</button>
`
})
export class AppComponent {
onSave() {
console.log("Button Was Clicked");
}
}
EVENT OBJECT

// Imports
import { Component } from "@angular/core";

// Decorator
@Component({
selector: "app-root",
template: `
<button (click)="onSave($event)">
Click
</button>
`
})
export class AppComponent {
onSave($event) {
console.log("Button Was Clicked", $event);
}
}

EVENT BUBBLING

// Imports
import { Component } from "@angular/core";

// Decorator
@Component({
selector: "app-root",
template: `
<div (click)="onDivClicked()">
<button (click)="onSave($event)">Click</button>
</div>
`
})
export class AppComponent {
onSave($event) {
console.log("Button Was Clicked", $event);
}
onDivClicked() {
console.log("Div was clicked");
}
}

PREVENTING EVENT BUBBLING

// Imports
import { Component } from "@angular/core";

// Decorator
@Component({
selector: "app-root",
template: `
<div (click)="onDivClicked()">
<button (click)="onSave($event)">Click</button>
</div>
`
})
export class AppComponent {
onSave($event) {
console.log("Button Was Clicked", $event);
$event.stopPropagation();
}
onDivClicked() {
console.log("Div was clicked");
}
}

EVENT FILTERING

import { Component } from "@angular/core";

@Component({
selector: "app-root",
template: `
<input (keyup)="onKeyUp($event)" />
`
})
export class AppComponent {
onKeyUp($event) {
if ($event.keyCode === 13) {
console.log("Enter was clicked");
}
}

TEMPLATE VARIABLE

1st Way

import { Component } from "@angular/core";

@Component({
selector: "app-root",
template: `
 <input (keyup)="onKeyUp($event)" />
`
})
export class AppComponent {
onKeyUp($event) {
console.log($event.target.value);
}
}

2nd Way

import { Component } from "@angular/core";

@Component({
selector: "app-root",
template: `
<input #email (keyup)="onKeyUp(email.value)" />
`
})
export class AppComponent {
onKeyUp(email) {
console.log(email);
}
}

TWOWAY_DATA BINDING

One-Way

// OneWay : from component to view

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<input [value]="email" (keyup)="onKeyUp()" />
`
})
export class AppComponent {
email = "me@example.com";
onKeyUp() {
console.log(this.email);
}
}

Two-way
Methos – 1

// TwoWay : Method-1
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<input [value]="email" (keyup)="email = $event.target.value; onKeyUp()" />
`
})
export class AppComponent {
email = "me@example.com";
onKeyUp() {
console.log(this.email);
}
}

Method-2

// TwoWay : Method-2
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<input [(ngModel)]="email" (keyup)="onKeyUp()" />
`
})
export class AppComponent {
email = "me@example.com";
onKeyUp() {
console.log(this.email);
}
}

PIPES
Another building block in angular is pipes. The pies are used to format data. For
example we have a bunch of pre-defined pipes.

 Uppercase
 Lowercase
 Decimal
 Currency
 Percent
 Date
We can have our own custom pipes.
INBUILT PIPES
import { Component } from "@angular/core";
@Component({
selector: "courses",
template: `
<b>Title</b> : {{ course.title | uppercase | lowercase }} <br />
<b>Rating</b> : {{ course.rating | number: "2.1-1" }} <br />
<b>Students</b> : {{ course.students | number }} <br />
<b>Price</b> : {{ course.price | currency: "AUD":true:"3.1-1" }} <br />
<b>ReleaseDate</b> : {{ course.releaseDate | date: "shortDate" }} <br />
`
})
export class AppComponent {
course = {
title: "The complete angular course",
rating: 4.9745,
students: 30123,
price: 190.5,
releaseDate: new Date(2016, 3, 1)
};
}

CUSTOM PIPES
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "courses",
template: `
{{ text | summary: 5 }}
`
})
export class AppComponent {
text = `Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam
voluptates velit alias nihil ipsum quod animi. Quis mollitia iusto maxime, rerum
minima, incidunt iure laudantium corrupti in quos vel tempora!Lorem ipsum dolor
sit amet consectetur, adipisicing elit. Aliquam voluptates velit alias nihil
ipsum quod animi. Quis mollitia iusto maxime, rerum minima, incidunt iure
laudantium corrupti in quos vel tempora!Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Aliquam voluptates velit alias nihil ipsum quod animi. Quis
mollitia iusto maxime, rerum minima, incidunt iure laudantium corrupti in quos
vel tempora!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam
voluptates velit alias nihil ipsum quod animi. Quis mollitia iusto maxime, rerum
minima, incidunt iure laudantium corrupti in quos vel tempora!Lorem ipsum dolor
sit amet consectetur, adipisicing elit. Aliquam voluptates velit alias nihil
ipsum quod animi. Quis mollitia iusto maxime, rerum minima, incidunt iure
laudantium corrupti in quos vel tempora!Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Aliquam voluptates velit alias nihil ipsum quod animi. Quis
mollitia iusto maxime, rerum minima, incidunt iure laudantium corrupti in quos
vel tempora!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam
voluptates velit alias nihil ipsum quod animi. Quis mollitia iusto maxime, rerum
minima, incidunt iure laudantium corrupti in quos vel tempora!Lorem ipsum dolor
sit amet consectetur, adipisicing elit. Aliquam voluptates velit alias nihil
ipsum quod animi. Quis mollitia iusto maxime, rerum minima, incidunt iure
laudantium corrupti in quos vel tempora!Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Aliquam voluptates velit alias nihil ipsum quod animi. Quis
mollitia iusto maxime, rerum minima, incidunt iure laudantium corrupti in quos
vel tempora!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam
voluptates velit alias nihil ipsum quod animi. Quis mollitia iusto maxime, rerum
minima, incidunt iure laudantium corrupti in quos vel tempora!Lorem ipsum dolor
sit amet consectetur, adipisicing elit. Aliquam voluptates velit alias nihil
ipsum quod animi. Quis mollitia iusto maxime, rerum minima, incidunt iure
laudantium corrupti in quos vel tempora!Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Aliquam voluptates velit alias nihil ipsum quod animi. Quis
mollitia iusto maxime, rerum minima, incidunt iure laudantium corrupti in quos
vel tempora!`;
}

summary.pipe.ts
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: "summary"
})
export class SummaryPipe implements PipeTransform {
transform(value: string, limit?: number) {
if (!value) {
return null;
}

let actualLimit = limit ? limit : 50;

return value.substr(0, actualLimit) + "...";
}
}

REUSABLE COMPONENTS

DEFINIG INPUT PROPERTY ON COMPONENT

favortite.component.html
<span
class="glyphicon"
[class.glyphicon-star]="isFavorite"
[class.glyphicon-star-empty]="!isFavorite"
(click)="onClick()"
>
</span>

favorite.component.ts
import { Component, OnInit, Input } from "@angular/core";

@Component({
selector: "favorite",
templateUrl: "./favorite.component.html",
styleUrls: ["./favorite.component.css"]
})
export class FavoriteComponent implements OnInit {
@Input() isFavorite: boolean;
constructor() {}

ngOnInit() {}

onClick() {
this.isFavorite = !this.isFavorite;
}
}

app.component.html
<favorite [isFavorite]="post.isFavorite"></favorite>

app.component.ts
import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
post = {
title: "Title",
isFavorite: true
};
}
INPUT ALIASING

OUTPUT PROPERTIES
PASSING EVENT DATA

OUTPUT ALISAING

STYLES

VIEW ENCAPSULAION

Shadow DOM : Allows us to apply scoped styles to elements without bleeding to the
outer world.

var el = document.querySelecor(‘favorite’);

el.innerHTML = `
<style> h1{color: red} <style>
<h1>Hello</h1>
`

Here style bleeds to other headings in favorite

var el = document.querySelecor(‘favorite’);

var root = el.createShadowRoot();

root.innerHTML = `
<style> h1{color: red} <style>
<h1>Hello</h1>
`

DIRECTIVES
 Structural : Modify the structure of the DOM
 Attribute : Modify the attributes of DOM elements
 DIRECTIVES
o ngFor
o ngIf
o ngSwitchCase
o ngClass
 o ngStyle
o Building custom directives

ngIf: ng-template
: Alternamtively - > Hidden

ngSwitchCase

app.component.html
<ul class="nav nav-pills">
<li [class.active]="viewMode == 'map'">
<a (click)="viewMode = 'map'">Map View</a>
</li>
<li [class.active]="viewMode == 'list'">
<a (click)="viewMode = 'list'">List View</a>
</li>
</ul>
<div [ngSwitch]="viewMode">
<div *ngSwitchCase="'map'">Map View Content</div>
<div *ngSwitchCase="'list'">List View Content</div>
<div *ngSwitchDefault>Otherwise</div>
</div>
app.component.ts
import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
viewMode = "other";
}

ngFor

app.component.ts
import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
courses = [
{ id: 1, name: "course1" },
{ id: 2, name: "course2" },
{ id: 3, name: "course3" }
];
}

app.component.html
<ul>
<li *ngFor="let course of courses ">
{{ i }} - {{ course.name }}
</li>
</ul>

Version 2:

app.component.html

<ul>
<li *ngFor="let course of courses; even as isEven">
{{ course.name }} <span *ngIf="isEven">(EVEN)</span>
</li>
<li *ngFor="let course of courses; odd as isOdd">
{{ course.name }} <span *ngIf="isOdd">(ODD)</span>
</li>

</ul>

CHANGE DETECTION
import { Component, OnInit } from "@angular/core";

@Component({
selector: "profile",
template: `
<!-- Exported Values by ngFor directive -->
<!-- ngFor Change Detection-->
<!-- Change Detection -->
<!-- Change Detection With TrackBy-->
<button class="btn btn-primary" (click)="onLoad()">Load Courses</button>
<button class="btn btn-success" (click)="onUpdate()">
Update Courses
</button>
<ul>
<li *ngFor="let course of courses; trackBy: trackCourse">
 {{ course.name }}
</li>
<!--<li *ngFor="let course of courses">
{{ course.name }}
</li>-->
</ul>
`,
styleUrls: ["./profile.component.css"]
})
export class ProfileComponent {
courses;
onLoad() {
this.courses = [
{ id: 1, name: "Course1" },
{ id: 2, name: "Course2" },
{ id: 3, name: "Course3" }
];
}
trackCourse(index, course) {
return course ? course.id : undefined;
}

onUpdate() {
this.courses.push({ id: 4, name: "Course4" });
}
}

ngClass DIRECTIVE

ngStyle DIRECTIVE

Safe Traversal Operator

Custom Directives

Attribute Binding with Custom Directive

Angular Forms
 Implement forms with different kinds of input fields
 Display validation errors
 Disable the submit button
Building a bootstrap form
 ng g c contact-form

FormControl Instance

FormGroupControl Instance

Form Validations

Checkboxes

Validating the Form upon Submit

Nested Form Groups

FormBuilder

CONSUMING HTTP SERVICES

ROUTING & NAVIGATION

 Configure routes
 Implementing single page applications (SPA)
 Working with route and query parameters
 Programmatic navigation
 Modules
o Forms
o ReactiveForms
o Http
o Router
 Steps
o Configure the routes
o Add a router outlet
o Add links