Setup Environment for Angular

- Install NodeJS on your PC for the package manager �NPM�

- Install Visual Studio Code � Editor
- Install TypeScript on your PC
> npm install -g typescript
- Install �Angular CLI� � It is a command line tool used for creating, configuring
and deploying angular projects.
> npm install -g @angular/cli
- Check the version
> ng --version

Update to New Version

- Uninstall existing Angular CLI
> npm uninstall -g @angular/cli
- Clean Cache
> npm cache verify
- Install latest version
> npm install -g @angular/cli

Create Angular Workspace

- Workspace comprises of set of projects
- It can maintain global repository that can be shared across projects
- Go to any location on your PC
C:\> ng new WorkspaceName --createApplication=false
C:\> ng new angularworkspace --createApplication=false
- Open the workspace folder in your editor �Visual Studio Code�

Add Angular Project into Workspace

- Open your workspace location in terminal
- Run the following command
C:\angularworkspace> ng generate application shopping
Share with Google Angular Team? N
Add Routing Module? N
Style Sheet Type? CSS
- This will add �Projects� folder into workspace with �shopping�

Run your project

- Open workspace location in terminal
- Run the following command
>ng serve --project=shopping
- It will start your project on local �Live Development Server�, which is listening
on
http://localhost:4200
- Once your project is compiled successfully, open the browser and request
http://localhost:4200

How Angular Application Projects Initial Content?

- Index.html is the start-up page for project

- Index.html is using �app-root�, which is a selector for �app-component�

- Go to �app� folder
- Go to �app.component.html�
- Customize the presentation.
- Save changes [Ctrl + S]
Components in Angular
- Components are building blocks for Angular Application

- Component comprises of
o Presentation in HTML
o Styles in CSS
o Functionality in TypeScript
- Technically Angular component is a class configured with functionality.
- Component behaviour is given by using �@Component()� decorator
- �@Component()� is derived from �@angular/core� library.

Syntax:
import { Component } from �@angular/core�;
@Component()
export class HeaderComponent
{
}

- @Component() is a marker and directive

- @Component() directive tells the compiler about component.
- @Component() comprises of meta data used by compiler to process your component.
- @Component() meta data comprises of various details like
o selector
o template
o templateUrl
o styles
o stylesUrl
o animations etc..
Syntax:
@Component({
selector: � �,
template: � �
})
- Configuration Rules
o Component class must have �Component� suffix
HomeComponent, AboutComponent, LoginComponent
o Component name is defined in �PascalCase�
o Component selector must have prefix as �app� with component name.
<app-home> <app-login>
o Component must be registered in �NgModule()� declarations[], of
�angular.module.ts�

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
o If you want your application to start with specific component then it must be
configured in
bootstrap:[ ]

Note: �bootstrapping� is the process of converting static DOM into dynamic DOM.
Before angular take control it is Static DOM
After the angular framework take control, it is Dynamic DOM
Adding a component into your application
- You can add manually by configuring the files into �app� folder
- You can add by using �Angular CLI� commands, which can scaffold [Ruby] the
content.
- You can import and inject 3rd party components into application
o Kendo Components [Telerik]
o Material Components
o Bootstrap Components

Adding a component manually

- Component have 2 types of documentation techniques
o In-line documentation
* Code, Design, Styles all are configured in one file.
* Faster in rendering
* Reusability, separation and testability issues.
* If you don�t need regular extensions in component.
o Code-Behind documentation
* Code, design and styles are configured in separate files.
* Reusability
* Extensibility
* Clean Separation
* If number of files increase then no. of requests will increase and page load time
will increase.

Design Component Manually using �Inline documentation� technique

- Go to �app� folder
- Add a subfolder �components�
- Add a new file into �components�
header.component.ts

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

@Component({
selector: 'app-header',
template: `
<div>
<h2>{{title}}</h2>
<p> Online Shopping - 70% OFF on Electronics </p>
</div>
`,
styles: ['h2{background-color:red; color:white; text-align:center}','p
{color:blue}']
})

export class HeaderComponent

{
title:string = 'Amazon Shopping';
}
- Go to �app.module.ts�
- Register your component and configure in bootstrap

@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule
 ],
providers: [],
bootstrap: [HeaderComponent]
})
- Go to �Index.html�
<body>
<app-header></app-header>
</body>

Design Component Manually using �Code-Behind documentation� technique

- Add following folder and files into �components�

- Login.component.ts

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

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent
{
title:string = 'User Login';
}

- Login.component.html

<div class="container">
<div class="box">
<h3>{{title}}</h3>
<dl>
<dt>User Name</dt>
<dd><input type="text"></dd>
<dt>Password</dt>
<dd><input type="password"></dd>
</dl>
<button>Login</button>
</div>
</div>

- Login.component.css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.box {
border:2px solid darkcyan;
border-radius: 10px;
padding: 20px;
}

Adding a new component using CLI commands

- Angular generates component and registers into �app.module�
- It uses a scaffolding technique for configuring component.
- Open �components� folder in terminal
- You can use the following commands
g � for generate
c � for component
CommandPurpose>ng g c anyNameGenerate a component with 4 files
- Component.ts
- Component.html
- Component.css
- Component.spec.ts [test]Flags for generate--skip-testsWill not add test file--
dry-runWill not generate the files, it is just a trail run to specify about what it
is going to generate. --flatWill not generate a separate folder for component. --
inline-templateWill not generate separate HTML file, It uses template in �.ts�
file.--inline-styleWill not generate separate CSS file, It uses �styles[]� in �.ts�
file.
Syntax:
> ng generate component home --skip-tests --inline-template --inline-style
> ng g c register --skip-tests

Add and Enable Bootstrap for your project

- Open your workspace location in Terminal
- Install bootstrap packages
> npm install bootstrap --save
> npm install bootstrap-icons --save
- Bootstrap CSS files must be liked globally to project
- Go to �styles.css� in �src� folder
@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../../node_modules/bootstrap-icons/font/bootstrap-icons.css';

Login.component.html
<div class="container-fluid justify-content-center align-items-center d-flex"
style="height: 400px;">
<div>
<h3>{{title}}</h3>
<dl>
<dt>User Name</dt>
<dd class="input-group">
<span class="bi bi-person input-group-text"></span>
<input type="text" class="form-control">
</dd>
<dt>Password</dt>
<dd class="input-group">
<span class="bi bi-key-fill input-group-text"></span>
<input type="password" class="form-control">
</dd>
</dl>
<div class="d-grid">
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>

Databinding in Angular
- Databinding is a technique used in applications to access data from store and
present in UI. Identifying the changes in UI and update back to store.
- JavaScript and jQuery use lot of DOM manipulations for Data Binding.
- Angular is completely de-coupled from DOM manipulations, it uses client-side
frameworks like
o MVC
o MVVM
- Databinding is categorized into 2 types
o One-Way-Binding
o Two-Way-Binding

Bind using Interpolation

- It uses angular binding expression �{{ }}�
- You can bind to any property or attribute using interpolation, but not
recommended.
- Interpolation is one-way and one-time.
Bind Data to Property or to Attribute
- Property is defined using �[ ]�

Ex:
Databinding.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-databinding',
templateUrl: './databinding.component.html',
styleUrls: ['./databinding.component.css']
})
export class DatabindingComponent {
Product:any = {
Name: 'Samsung TV',
Price: 46000.55,
Stock: true
}
isInvalid = false;

}
Databinding.component.html
<div class="container-fluid mt-3">
<h3>Product Details</h3>
<dl>
<dt>Name</dt>
<dd [innerHTML]="Product.Name"></dd>
<dd>
<input type="text" [value]="Product.Name" >
</dd>
<dt>Price</dt>
<dd>{{Product.Price}}</dd>
<dt>Stock</dt>
<dd>{{(Product.Stock==true)?"Available":"Out of Stock"}}</dd>
</dl>
<button [disabled]="isInvalid" class="btn btn-primary">Add Product</button>
</div>