Angular Notes
Angular Notes
Angular Notes
Angular
=========
-> Angular is mainley used for Single Page Applications Development (SPA)
========================
Angular Building Blocks
========================
1) Components
2) Metadata
3) Template
4) Data Binding
5) Module
6) Service
7) Dependency Injection
8) Directives
9) Pipes
-> Metadata nothing but data about the data. It provides information about
components and templates mapping.
-> Template is a view where we will write our presentation logic. In Angular
application template is a HTML file. Every Component contains its own Template.
-> Data Binding is the process of binding data between component property and view
element in template file.
-> Service means it contains re-usable business logic. Service classes we will
inject into Components using Depdency Injection.
-> Dependency Injection is the process of injecting dependent object into target
object. In Angular applications services will be injected into components using DI.
============================================
Environment Setup For Angular Applications
===========================================
1) Install Node JS
2) Install TypeScript
3) Install Angular CLI
4) Install Visual Studio Code IDE
URL : https://nodejs.org/en/
-> After installing node software, open cmd and type node -v. It should display
node version number then installation is successfull.
-> We can install Typescript using Node Package Manager (npm). Open command prompt
and execute below command to install TS.
-> After TypeScript installation got completed we can verify version number using
below command in cmd. If it displays version number then installtion is
successfull.
$ tsc -v
$ ng v
URL : https://code.visualstudio.com/download
Note: We are done with angular setup... lets start building angular applications
===================================================================================
=========
-> Open command prompt from your workspace folder then type 'code .' then it will
open VS CODE IDE from that folder
-> Open terminal in VS CODE IDE to execute our commands ...
$ ng new <app-name>
-> Once application got created, navigate into that application folder and execute
below command to run angular application.
$ ng serve
-> Angular applications will be deployed into live server which runs on port number
4200. Once application is deployed we can access that using below URL
URL : http://localhost:4200/
Goto -> Project folder -> src -> app > app.component.html (edit
this file)
=================
Angular packages
=================
-> @angular/core : This pkg provides classes and interfaces that are related to
decorators, components and DI. These are mandatory in every Angular 2+ application.
-> @angular/common : This package provides common directives and pipes which are
used in most of the angular applications.
@angular/platform-browser
@angular/platform-browser-dynamic
-> @angular/forms : This package is used to create "two way data bindings" ,
"validations" in angular 2+ applications. This package works based on another
package called "zone.js". This package contains below two modules
a) Forms Module
b) Reactive Forms Module
-> @angular/http : This package is used to send Ajax request to server and get Ajax
response from server.
-> @angular/cdk : Based on this package only "angular material design" components
are developed. So this package must be used while using "@angular/material"
package.
-> @angular/cli : This package provides set of commands to create new angular
application, components, pipes, directives, services etc.
===================================================================================
==========
-> When we run angular application, it starts execution from startup module i.e
app-module
-> Angular application boot strapping will begin from app module
src/app/app.module.ts
src/app/app.component.ts
src/app/app.component.html
src/app/app.component.css
src/app/app.component.spec.ts
src/app/app.module.ts
----------------------
-> This file contains definition of app module
-> Angular app can have any no.of modules. It should at least one module i.e called
as "AppModule"
-> This file imports "AppComponent" from app.component.ts file and bootstraps the
same in "AppModule"
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/app.component.ts
-------------------------
-> This file contains defintion of "AppComponent"
-> In Angular application we can have many components. It should contain atleast
one component that is called as "AppComponent"
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app1';
}
src/app/app.component.html
---------------------------
-> This file contains presentation logic of component
src/app/app.component.css
-------------------------
-> This file contains css syles of "AppComponent"
src/app/app.component.spec.ts
-----------------------------
-> This file contains test cases for "AppComponent"
-> The test case files should have "spec.ts" file extension
=========================================================================
=> When we access Angular application URL in Browser it will load index.html file
=> In index.html file we are using AppComponent selector to invoke AppComponent.
<app-root></app-root>
-----------------------------------------------------------------------------------
----------
-> When we create new component it will generate 4 files like below
=================
Components
=================
-> The component class represents certain section of web page. For example, "login
form" is represented as login component.
-> The component class includes "properties" to store the data, "methods" to
manipulate the data.
-> Every Angular 2+ application contains at-least one component which is called as
"app component". We can create any no.of components in angular application.
-> A component is invoked through a custom tag called as selector. "app component"
selector is "<app-root></app-root>".
-> The Component class should have a decorator called "@Component" to define that
class as Component class.
Component Class
--------------------------
import {Component} from "@angular/core"
@Component (meta-data)
class ClassName{
property:dataType = value;
method(args) : returnType {
//logic
}
}
-> templateUrl : represents the html file that has to be rendered when the
component is invoked
-> styleUrls : Represents the list of styles (css) that have to be loaded for the
component.
-----------------------------------------------------------------------------------
------------
Note: The components which we are creating will act as child components for
AppComponent.
-----------------------------------------------------------------------------------
------------
-> Invoke Welcome Component & Greet Component in AppComponent like below
---------------------------
app.component.html-------------------------------------------------
<h1> This message from AppComponent</h1>
<app-welcome></app-welcome>
<app-greet></app-greet>
-----------------------------------------------------------------------------------
----------
Note: Every Component having its own CSS file to apply styles for that component
related template logic.
-----------------------------------------------------------------------------------
----------
=================
Data Bindings
=================
-> The "data binding" is used to establish relation between "component" and
"template".
-> When the value of "component" is changed, then template will be changed
automatically. When the value of "template" is changed, then the "component" will
be changed automatically.
1) Interpolation
2) Property Binding
3) Event Binding
4) Two Way Binding
=================
Interpolation
=================
-> It is used to display the value of variable / property in template file
syntax : {{propertyName}}
--------------------------
Property Binding
---------------------------
-> Property Binding is used to send the data from component to template and assign
the same into an attribute of tag.
Syntax: [attribute]=*property
-----------------------
Event Binding
-----------------------
-> It is used to pass event notifications from template to component
-----------------------------------
Two-way Data Binding
----------------------------------
-> Two-way data binding is the combination of both property binding and event
binding
-> When we change the value of the property then automatically it will be updated
in HTML element.
-> When we change the value of HTML element then automatically it will updated in
property.
-> "ngModel" is the pre-defined directive which is used to achieve two-way data
binding.
-> Two way data binding is applicable only for <input/> and <select/> tags.
-> "FormsModule" must be imported in order to use Two Way Data Binding
====================================================================
Developing Angular application with Two Way Data Binding
====================================================================
-----------------------
app.module.ts----------------------------------------------------------
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
------------------------app.component.ts-----------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
fname:string = "Adam";
lname:string = "Smith";
age:number=25;
gender:string="Male";
country:string="India";
isEmployed:boolean=true;
handleSubmitBtn(){
this.fname = "John";
this.lname="Buttler";
this.age = 30;
this.gender= "Male";
this.country="USA";
this.isEmployed=false;
}
}
---------------------app.component.html-------------------------
<div>
<h4>Data Bindings Example</h4>
First Name : {{fname}} <br/>
Last Name : {{lname}} <br/>
Age : {{age}} <br/>
Gender : {{gender}} <br/>
Country : {{country}} <br/>
Is Employed : {{isEmployed}} <br/>
<hr/>
Country :
<select [(ngModel)]="country">
<option>India</option>
<option>USA</option>
<option>UK</option>
</select> <br/>
</div>
===================================================
Angular application with Registration Form
===================================================
$ ng new registration
-> Write variables and function in component class to deal with registration form
$ ng serve
------------------------app.module.ts--------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
-----------------------app.component.ts-------------------------
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
username:string="";
password:string="";
confirmPassword:string="";
gender:string="";
country:string="";
licenseAgreement:boolean=false;
msg:string="";
RegisterClick(){
this.msg = "Username : "+this.username+"<br/>Password:"+this.password
+"<br/>ConfirmPassword:"+this.confirmPassword
+"<br/>Gender : "+this.gender+"<br/>Country : "+this.country
+"<br/>License Agreement : "+this.licenseAgreement;
}
}
--------------------app.component.html------------------------
<h4>Registration</h4>
Country:
<select [(ngModel)]="country">
<option>-Select-</option>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select> <br/>
=============
Directives
=============
----------------------
What is DOM?
----------------------
-> DOM stands for Document Object Model
--------------------------
Built-In Directives
----------------------------
style
--------
-> It is used to set CSS property value dynamically at runtime.
-> When Component property value changed then CSS property value will be changed
automatically.
Syntax
------
<tagname [style.cssproperty]="component-property">
----------------------app.component.ts------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
marks:number=20;
mycolor:string="";
constructor(){
if(this.marks >= 35 ){
this.mycolor="green";
}else{
this.mycolor="red";
}
}
}
-------------------------app.component.html-------------------
<div>
<h3>Style Directive Example</h3>
<div [style.color]="mycolor">{{marks}}</div>
</div>
---------------------------------------------------------------
ngClass
======
-> IT is used to CSS classname dynamically at run time
-> When the value of Component property is changed then css class will be changed
automatically.
-> Use this directive to set styles with multiple properties conditionally.
----------------------app.component.css---------------------
.class1{
color:green;
font-size:30px;
}
.class2{
color:red;
font-size:50px;
}
---------------------app.component.html---------------------
<div>
<h3>ngClass Directive Example</h3>
<div [ngClass]="myclass">{{marks}}</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 {
marks:number=80;
myclass:string="";
constructor(){
if(this.marks >=35 ){
this.myclass="class1";
}else{
this.myclass="class2";
}
}
}
-------------------------------------------------------------
ngIf
----
-> The ngIf displays the element if condition is true otherwise it will remove
element from DOM.
Syntax:
-------
<tag *ngIf="condition">
</tag>
Note: The ngIf directive must prefix with *
--------------------------app.component.ts---------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
marks:number=80;
b:boolean;
constructor(){
if(this.marks >=35 ){
this.b=true;
}else{
this.b=false;
}
}
}
-----------------app.component.html----------------------------
<div>
<h3>ngIf Directive Example</h3>
syntax:
-------
<tag *ngIf="condition; then template1;else template2">
</tag>
<ng-template #template1>
...
</ng-template>
<ng-template #template2>
...
</ng-template>
-----------------------app.component.ts------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
marks:number=80;
b:boolean;
constructor(){
if(this.marks >=35 ){
this.b=true;
}else{
this.b=false;
}
}
}
------------------------app.component.html----------------------
<div>
<h3>ngIf else Directive Example</h3>
</div>
<ng-template #template1>
<div style="background-color:green;">Congratulations...."</div>
</ng-template>
<ng-template #template2>
<div style="background-color:red">Better luck next time...</div>
</ng-template>
-----------------------------------------------------------------------
-------------
ngSwitch
-------------
-> The "ngSwitch" checks the value of a variable, weather it matches with any one
of the cases and displays element when it matches with anyone.
-> Use "ngSwitch" if you want to display some content for every possible value in a
variable.
syntax
------
<tag [ngSwitch]="property">
<tag *ngSwitchCase="'value'"></tag>
<tag *ngSwitchCase="'value'"></tag>
<tag *ngSwitchCase="'value'"></tag>
<tag *ngSwitchDefault></tag>
</tag>
---------------------app.component.ts--------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
country:string=null;
}
-----------------------app.component.html-------------------------------
<div>
<h4>ngSwitch Example</h4>
<select [(ngModel)]="country">
<option>India</option>
<option>USA</option>
<option>UK</option>
<option>Japan</option>
</select>
<div [ngSwitch]="country">
<p *ngSwitchCase="'India'">India Details Here</p>
<p *ngSwitchCase="'USA'">USA Details Here</p>
<p *ngSwitchCase="'UK'">UK Details Here</p>
<p *ngSwitchCase="'Japan'">Japan Details Here</p>
<p *ngSwitchDefault>Please select country</p>
</div>
</div>
------------------------------------------------------------------------
ngFor
=====
-> It is used to repeat the tag once for each element in the array. It generates
(repeats) the given content once for one element of the array.
Syntax:
-------
<tag *ngFor="let variable of arrayname">
</tag>
------------------------app.component.ts--------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
cities:string[] = ["New Delhi", "Mumbai", "Banglore", "Hyderabad"];
}
-----------------------app.component.html----------------------------
<div>
<h4>ngFor Example</h4>
<ul>
<li *ngFor="let city of cities">{{city}}</li>
</ul>
</div>
----------------------------------------------------------------------
-> First we have to store set of objects inside array then read objects one-by-one
using "ngFor" and display the data in table format.
Usecase: Reading Product details (name & price) and displaying them.
-----------------------employee.ts----------------------------
export class Employee{
empId:number;
empname:string;
salary:number;
constructor(a, b, c){
this.empId = a;
this.empname = b;
this.salary = c;
}
}
---------------------app.component.ts--------------------------
import { Component } from '@angular/core';
import { Employee } from './employee';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
employees:Employee[] = [
new Employee(101, "John", 5000),
new Employee(102, "Smith", 5000),
new Employee(103, "Nick", 6000)
];
}
---------------------app.component.html---------------------------
<div>
<h4>ngFor with Object Array Example</h4>
<table border="1">
<tr>
<th>Emp Id</th>
<th>Emp Name</th>
<th>Emp Salary</th>
</tr>
<tr *ngFor="let emp of employees">
<td>{{emp.empId}}</td>
<td>{{emp.empname}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>
----------------------------------------------------------------
------------------app.module.ts---------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
-----------------------employee.ts----------------------------
export class Employee{
empId:number;
empname:string;
salary:number;
constructor(a, b, c){
this.empId = a;
this.empname = b;
this.salary = c;
}
}
----------------------app.component.ts---------------------------
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
employees:Employee[] = [
new Employee(101, "John", 5000),
new Employee(102, "Smith", 5000),
new Employee(103, "Nick", 6000),
new Employee(104, "Ashok", 8000)
];
onInsertClick(){
this.employees.push(new
Employee(this.newemployee.empId,this.newemployee.empname,this.newemployee.salary));
this.newemployee.empId = 0;
this.newemployee.empname = "";
this.newemployee.salary = 0;
}
onDeleteClick(n:number){
if(confirm("Are you sure to delete this emp?")){
this.employees.splice(n,1);
}
}
-----------------------app.component.html-----------------------
<div>
<h4>ngFor with Object Array Example</h4>
<table border="1">
<tr>
<th>Emp Id</th>
<th>Emp Name</th>
<th>Emp Salary</th>
<th>Action</th>
</tr>
<tr *ngFor="let emp of employees; let i = index">
<td>{{emp.empId}}</td>
<td>{{emp.empname}}</td>
<td>{{emp.salary}}</td>
<td><input type="button" value="Delete"
(click)="onDeleteClick(i)"></td>
</tr>
<tr>
<td><input type="text" [(ngModel)]="newemployee.empId"
placeholder="Emp Id"></td>
<td><input type="text" [(ngModel)]="newemployee.empname"
placeholder="Emp Name"></td>
<td><input type="text" [(ngModel)]="newemployee.salary"
placeholder="Emp Salary"></td>
<td><input type="button" value="Insert"
(click)="onInsertClick()"></td>
</tr>
</table>
</div>
----------------------------------------------------------------
Searching & Sorting
------------------------------------------------------------------
-> We will use "filter" function to search content. The filter function recives a
callback function, which gets executed once for each item in the array.
-> We will use "sort" function to sort the data. The sort function recieves a
callback function, which gets called for each pair of items in the list.
-----------------------app.module.ts--------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
---------------------------employee.ts---------------------------
export class Employee{
empId:number;
empname:string;
salary:number;
constructor(a, b, c){
this.empId = a;
this.empname = b;
this.salary = c;
}
}
--------------------------app.component.ts-----------------------
import { Component } from '@angular/core';
import { Employee } from './employee';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
originalemployees:Employee[] = [
new Employee(101, "John", 5000),
new Employee(102, "Smith", 12000),
new Employee(103, "Nick", 6000),
new Employee(104, "Orlen", 8000),
new Employee(105, "Charles", 9000),
];
employees:Employee[] = [];
constructor(){
this.employees = this.originalemployees;
}
str:string = "";
sortcolumn = "empId";
order = 1;
onSearchClick(){
this.employees = this.originalemployees.filter((emp) => {
return emp.empname.toLowerCase().indexOf(this.str.toLowerCase())
>=0;});
}
onSortClick(){
this.employees = this.originalemployees.sort((emp1,emp2) => {
var n = 0;
if(this.sortcolumn=="empId"){
return (emp1[this.sortcolumn]-emp2[this.sortcolumn]) *
this.order;
}else if(this.sortcolumn=="empname"){
return (emp1[this.sortcolumn].charCodeAt(0) -
emp2[this.sortcolumn].charCodeAt(0)) * this.order;
}else{
return (emp1[this.sortcolumn] - emp2[this.sortcolumn]) *
this.order;
}
});
}
}
-----------------------------app.component.html-------------------
<div>
<h4>ngFor with Searching and Sorting Data</h4>
<input type="text" placeholder="Search" [(ngModel)]="str">
<input type="button" value="Search" (click)="onSearchClick()">
<br/>
Sort :
<select [(ngModel)]="sortcolumn">
<option>empId</option>
<option>empname</option>
<option>salary</option>
</select>
<select [(ngModel)]="order">
<option value="1">Asending Order</option>
<option value="-1">Descending Order</option>
</select>
<input type="button" value="Sort" (click)="onSortClick()">
<table border="1">
<tr>
<th>Emp Id</th>
<th>Emp Name</th>
<th>Emp Salary</th>
</tr>
<tr *ngFor="let emp of employees">
<td>{{emp.empId}}</td>
<td>{{emp.empname}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>
========
Services
========
-> The service is a class which contains re-usable business logic (encryption, de-
cryption, validations, calculations etc.)
-> Service class logics we can access in one or more component classes
-> If we keep re-usable set of properties and methods as part of service class,
then we can access them from any cmponent and from any other service available in
the application.
-> We must declare service class with "@Injectable()" decorator, to make the
service can be accessed from any component.
-> We must use "@Inject()" decorator, to request angular to create an object for
the service class. Then angular framework will automatically creates an object for
the service class and passes the object as an argument for our Component class
Constructor.
Note: Realtime applications contains logic to access Backend Rest APIs in Service
classes.
Syntax
-------
@Injectable()
class ServiceClassName {
//methods here
}
@Component( { } )
class ComponentClassName{
constructor(@Inject(ServiceClassName) variable:ServiceClsName ){
}
}
-----------------------------------------------------------------------------------
-------
-> Service is a class in Angular application which contains re-usable business
logic.
-> We will inject Service class object into Component class using @Inject decorator
-> Service class object we will take as a parameter for Component class Constructor
-> One Service class object can be used in any no.of Component classes.
-> To create Service we will use below command
@Injectable({
providedIn: 'root'
})
export class LoginService {
constructor() { }
}
=======================================
Application Development Using Services
=======================================
$ ng new login
$ ng g service Login
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [LoginService],
bootstrap: [AppComponent]
})
export class AppModule { }
username:string;
password:string;
constructor(a:string, b:string){
this.username = a;
this.password = b;
}
}
6) Write the business logic in Service class to validate username & password
@Injectable({
providedIn: 'root'
})
export class LoginService {
users:User[] = [
new User("john", "john@123"),
new User("smith","smith@123"),
new User("ashok", "ashok@123")
];
constructor() { }
checkUnameAndPwd(username:string, password:string):boolean{
var count = 0;
for(var i = 0; i<this.users.length;i++){
if(this.users[i].username==username && this.users[i].password==password){
count ++;
}
}
if(count ==1){
return true;
}else{
return false;
}
}
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
username:string="";
password:string="";
msg:string="";
<div>
<h4>Login Example Using Service</h4>
Username : <input type="text" [(ngModel)]="username"> <br/>
Password: <input type="password" [(ngModel)]="password"><br/>
<input type="submit" value="Login" (click)="CheckLogin()">
{{msg}}
</div>
=============
Pipes
============
-> Pipes are used to transform the value into user-expected-format
-> Pipes are inovked in expresssion (interpolation binding), through pipe (|)
symbol.
-------------------------------------------------------------
-> Create Angular application using below command
$ ng new app-name
.class1{
border: 2px solid red;
margin: 20px;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
city:string = "Hyderabad";
salary:number= 752487500;
n:number=0.72;
person:object = {firstname:"Adam",lastname:"Smith"};
dt:Date = new Date();
}
-> Write below presentation logic in app component template file using Pipes
<div class="class1">
<h4>Pipes Example</h4>
City : {{city}} <br/>
Salary: {{salary}}<br/>
n: {{n}} <br/>
Current Time : {{dt}} <br/>
Person : {{person}} <br/>
<hr/>
City In Uppercase:: {{city | uppercase}} <br/>
City In Lowercase : {{city | lowercase}} <br/>
Slice : {{city | slice : 2:6}}<br/>
Currency in USD: {{salary | currency:"USD"}} <br/>
Currency in INR : {{salary | currency:"INR"}} <br/>
Short Date : {{dt | date : "shortDate"}} <br/>
Medium Date: {{dt | date: "mediumDate"}} <br/>
Medium: {{dt | date: "medium"}} > <br/>
Formatted Date : {{dt | date:"d/M/y"}}
</div>
$ ng serve
====================
Forms and Validations
====================
-> Developing forms is very common requirement in every web applications
1) Reactive Forms
2) Template-Driven Forms
Choosing an approach
---------------------
Reactive forms and template-driven forms process and manage form data differently.
Each approach offers different advantages.
Reactive forms provide direct, explicit access to the underlying forms object
model. Compared to template-driven forms, they are more robust: they're more
scalable, reusable, and testable. If forms are a key part of your application, or
you're already using reactive patterns for building your application, use reactive
forms.
==========================
Template Driven Forms
==========================
-> Template driven forms are suitable for development of Simple forms with limited
no.of fields and simple validations.
-> In these forms, each field is represented as a property in the component class.
-> Validation rules are defined in the template using "html5" attributes.
Validation messages are displayed using "validation properties" of angular.
$ ng new app10
/* You can add global styles to this file, and also import other style files */
input.ng-invalid.ng-touched{
border: 2px solid red;
}
input.ng-valid.ng-touched{
border: 2px solid green;
}
.error{
color: red;
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
msg:string="";
submit(form:any){
console.log(form.firstName);
console.log(form.lastName);
console.log(form.comment);
this.msg="Contact Form Submitted For "+form.firstName;
}
}
------------------app.component.html------------------------
</form>
=================
Reactive Forms
=================
-> Reactive Forms are also called as Model Driven Forms
-> Reactive forms are new style to develop forms in angular which are suitable for
creating large scale forms with many fields and complex validations.
-> In these forms, each field is represented as "FormControl" and group of controls
is represented as "FormGroup"
-> Validation rules are defined in the component using "Validators" object of
angular and validation messages are dsiplayed in the template using "validation
properties" of angular.
Validation Properties
---------------------
untouched
touched
pristine
dirty
valid
invalid
errors
-------------------------------------------------------------------
Requirement : Develop a form using Reactive forms Approach
--------------------------------------------------------------------
----------------------------------------------------------------------
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
input.ng-invalid.ng-touched{
border: 2px solid red;
}
input.ng-valid.ng-touched{
border: 2px solid green;
}
.error{
color: red;
}
-----------------------------------------------------------------------------------
----------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
-----------------------------------------------------------------------------------
---------------------------
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'reactiveformapp';
get f(){
return this.form.controls;
}
submit(){
console.log(this.form.value);
}
}
-----------------------------------------------------------------------------------
----------------------------
<h1>Angular 13 Reactive Forms Validation Example</h1>
<div class="form-group">
<label for="name">Name</label>
<input
formControlName="name"
id="name"
type="text"
class="form-control">
<div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-
danger">
<div *ngIf="f['name'].errors && f['name'].errors['required']">Name is
required.</div>
<div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name
should be 3 character.</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
formControlName="email"
id="email"
type="text"
class="form-control">
<div *ngIf="f['email'].touched && f['email'].invalid" class="alert alert-
danger">
<div *ngIf="f['email'].errors && f['email'].errors['required']">Email
is required.</div>
<div *ngIf="f['email'].errors && f['email'].errors['email']">Please,
enter valid email address.</div>
</div>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea
formControlName="body"
id="body"
type="text"
class="form-control">
</textarea>
<div *ngIf="f['body'].touched && f['body'].invalid" class="alert alert-
danger">
<div *ngIf="f['body'].errors && f['body'].errors['required']">Body is
required.</div>
</div>
</div>
=====================================================
Steps to install Boostrap In Angular Application
======================================================
....
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
.....
======================
Routing
=======================
-> The routing concept is used to create page navigations in angular2+ applications
-> "Routing" is the process of mapping between the "route(url)" and corresponding
component
eX:
http://localhost:8080/home --> HomeComponent
================================================
Steps To Develop angular app with with Routing
================================================
$ ng new routeapp
$ ng g c Home
$ ng g c About
$ ng g c Contact
$ ng g c Service
Step-3) Configure Routes and Combine them with RouterModule in "AppModule" like
below
--------------------------app.module.ts----------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
var myRoutes:Routes = [
{path:"", component:HomeComponent},
{path:"home", component:HomeComponent},
{path:"about",component: AboutComponent},
{path:"services",component: ServicesComponent},
{path:"contact", component: ContactComponent}
];
<div class="class1">
<h4>Angular - Routing</h4>
<a routerLink="home">Home</a>
<a routerLink="services">Our Services</a>
<a routerLink="about">About Us</a>
<a routerLink="contact">Contact Us</a>
--------------------home.component.html--------------------------------
<p>Welcome To Ashok IT - Software Training</p>
----------------------contact.component.html--------------------------
<p>Please Contact Us : + 91 - 9985 39 66 77 For Online Training</p>
-------------------- about.component.html-------------------------------
<p>Ashok IT Software Training Institute started in 2020</p>
-------------------- services.component.html-------------------------------
<p>Ashok IT offering Classroom & Online Trainings..</p>
--------------------------------------------------------------------
$ ng serve
-----------------------------------------------------------------------------------
============
AJAX
============
-> AJAX stands for Asynchronus Java Script and XML
-> AJAX is not a language but it is a concept which is used to send request from
browser to server and also get response from server to browser without
refreshing(reloading) the web page in browser.
-> AJAX allows us to interact with the server and get some data from server without
refreshing full web page.
Advantages of Ajax
------------------
1) Executes faster
-> If we want to send AJAX request we will import and inject HttpClient. Using this
HttpClient we can send AJAX request to server.
====================================
REST api integration with Angular UI
====================================
$ ng new app15
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule, HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'sbuiapp';
message:string="";
constructor(@Inject(HttpClient)private http:HttpClient){}
getData(){
this.http.get("http://localhost:9090/welcome", {responseType : 'text'})
.subscribe(data => {
this.message = data;
});
}
<div>
<h4>Spring Boot REST API + Angular Integration</h4>
========================
HTTP Client Examples
========================
$ ng new app16
bookId:number;
bookName:string;
bookPrice:number;
constructor(a:number,b:string,c:number){
this.bookId = a;
this.bookName = b;
this.bookPrice = c;
}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule, HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
books:Book[] = [];
constructor(@Inject(HttpClient)private http:HttpClient){}
getData(){
this.http.get<Book[]>("http://localhost:9090/books", {responseType : 'json'})
.subscribe(data => {
this.books = data;
});
}
}
<div>
<h3>Book Details</h3>
<input type="button" value="Get Data" (click)="getData()"/>
<table border="1">
<tr>
<th>Book Id</th>
<th>Book Name</th>
<th>Book ISBN</th>
<th>Book Price</th>
</tr>
<tr *ngFor="let book of books">
<td>{{book.bookId}}</td>
<td>{{book.bookName}}</td>
<td>{{book.isbn}}</td>
<td>{{book.bookPrice}}</td>
</tr>
</table>
</div>
-----------------------------------------------------------------------------------
-----------
HTTP POST Request Example
-----------------------------------------------------------------------------------
-----------
-----------------------
AppComponent.ts-------------------------------------------------------
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
msg:string;
book:Book = new Book(null,null,null,null);
constructor(@Inject(HttpClient)private http:HttpClient){}
onInsertClick(){
this.http.post("api-url", this.book, {responseType:"text"})
.subscribe(data => {
this.msg = data;
);
}
}
-----------------------
app.component.html----------------------------------------------------
<div>
<h3>Angular UI + Boot REST API</h3>
<form>
Book ID : <input type="text" name="bookId" [(ngModel)]="book.bookId"/><br/>
Book Name : <input type="text" name="bookName"
[(ngModel)]="book.bookName"/><br/>
Book Price : <input type="text" name="bookPrice"
[(ngModel)]="book.bookPrice"/><br/>
<input type="submit" value="Save Book" (click)="onInsertClick()"/><br/>
{{msg}}
</form>
</div>
-----------------------------------------------------------------------------------
------------