0% found this document useful (0 votes)
15 views

Angular - Notes - CRIS

Uploaded by

thenewsites20
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views

Angular - Notes - CRIS

Uploaded by

thenewsites20
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 19

Angular

-----------
Angular is a client side JS framework which allows to create reactive responsive
Applications.

Reactive----Reactive means it will automatically referesh the page.


Resonsive---you can run on multiple devices----laptop/desktop/mobiles/IPad

Angular is a client side JS framework which allows to create reactive responsive


Applications.
Angular is a Client Side JS Framework
Angular is an Open Source
Angular support Single Page Application(SPA)
Angular is a JS framework which runs on dev server----Node.JS
For Production, we can deploy, IIS, MACOS, LINUX

Angular is a Binding Framework


Angular is a component based programming
Angular internally uses the Typescript, which is developed by the Microsoft
Typescript----Open Source-----supports----Object oriented programming.

Angular run on by Default port number 4200


Angular is meant for creating Light weight UI
Angular does not support database connectivity because of the client side framework
-----Express.js/ Web Api /Dotnet Core Web API

Angular supports Routing, that means you can navigate from one components to
another components
Angular uses the Mobile First Approach
Typescript does not understand the browser.

Typescript(ts)-----tsc compiler-----Javascript(js)-------DOM------Browers

File.ts---------------tsc compiler---------------File.js

***********************************************************************************
**********************

TypeScript
------------------

TypeScript is JavaScript for application-scale development.

TypeScript is a strongly typed, object oriented, compiled language. It was designed


by Anders Hejlsberg (designer of C#) at Microsoft.

TypeScript is both a language and a set of tools.

TypeScript is a typed superset of JavaScript compiled to JavaScript. In other


words, TypeScript is JavaScript plus some additional features.

TypeScript is an open-source, object-oriented programing language, which is


developed and maintained by Microsoft under the Apache 2 license.

It was introduced by Anders Hejlsberg, a core member of the development team of C#


language.
TypeScript is a strongly typed superset of JavaScript which compiles to plain
JavaScript.

It is a language for application-scale JavaScript development, which can be


executed on any browser, any Host, and any Operating System

TypeScript is not directly run on the browser. It needs a compiler to compile and
generate in JavaScript file.

TypeScript is the ES6 (ECMAScript) version of JavaScript with some additional


features.

Compilation of Typescript
---------------------------
TypeScript cannot run directly on the browser. It needs a compiler to compile the
file and generate it in JavaScript file, which can run directly on the browser.

The TypeScript source file is in ".ts" extension.

We can use any valid ".js" file by renaming it to ".ts" file.

FileName.ts-----------------tsc-----------------FileName.js

TypeScript uses TSC (TypeScript Compiler) compiler, which convert Typescript code
(.ts file) to JavaScript (.js file).

Features of Typescript
--------------------------
TypeScript supports Static typing, Strongly type, Modules, Optional Parameters,
etc.

TypeScript supports object-oriented programming features such as classes,


interfaces, inheritance, generics, etc.

TypeScript is fast, simple, and most importantly, easy to learn.

TypeScript provides the error-checking feature at compilation time. It will compile


the code, and if any error found, then it highlighted the mistakes before the
script is run.

TypeScript supports all JavaScript libraries because it is the superset of


JavaScript.

TypeScript support reusability because of the inheritance.

TypeScript supports the latest JavaScript features, including ECMAScript 2015.

TypeScript gives all the benefits of ES6 plus more productivity.

Developers can save a lot of time with TypeScript.


Advantages of Typescript
---------------------------

TypeScript always highlights errors at compilation time during the time of


development, whereas JavaScript points out errors at the runtime.

TypeScript supports strongly typed or static typing, whereas this is not in


JavaScript.

TypeScript runs on any browser or JavaScript engine.

Great tooling supports with IntelliSense which provides active hints as the code is
added.

It has a namespace concept by defining a module.


***********************************************************************************
***************************

Variables
--------------

The TypeScript language supports different types of values.


It provides data types for the JavaScript to transform it into a strongly typed
programing language.
JavaScript doesn't support data types, but with the help of TypeScript, we can use
the data types feature in JavaScript.
TypeScript plays an important role when the object-oriented programmer wants to use
the type feature in any scripting language or object-oriented programming language.
The Type System checks the validity of the given values before the program uses
them.

set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Syntax of variables
---------------------
variable : data_type= value;

variable.ts
-----------------
let i:number = 90;
//i is the variable of type number which is holding or assigning the value 90
console.log("The value of i would be = "+ i);

To run the Typescript


-------------------------
tsc filename.ts
node filename.js

***********************************************************************************
*************************

Function in Typescript
-----------------------
Function is a block of code that executes the statements.
Function may or may not return the values.
Function Should be the unique name

Advantages of function
------------------------

These are the main advantages of functions.

Code reusability:
-----------------
We can call a function several times without writing the same block of code again.
The code reusability saves time and reduces the program size.

Less coding:
--------------
Functions makes our program compact. So, we don't need to write many lines of code
each time to perform a common task.
Easy to debug: It makes the programmer easy to locate and isolate faulty
information.

Syntax of the function


-----------------------
function function_name
{
//block of code
}

***********************************************************************************
*************************

Enums
-----------

Enums or Enumerations are a new data type supported in Typescript.


Most of the object oriented Languages like Java, C# use enums.
This is now avaiable in Typescript.

Enums allows us to declare a set of named constant


Enum is a collection of related values that can be numeric or string values.
Enum is a set of related constants
Enum is user defined data type
Enum can be transvered

***********************************************************************************
*************************

Arrays
-----------

An Array is a homogenous collection of similar types of elements which have a


contiguous memory location.
An Array is user defined data type
An Array is a type of data structure where we store the elements of a similar type.
The array is index-based storage, where the first element stored at index 0.

Characteristics of an Array
-----------------------------

----An array stores elements which have the same data type.
----Array elements stored in contiguous memory locations.
----The storage of 2-D array elements is rowed by row in a contiguous memory
location.
----Array name represents the address of the starting element.
----The size of an array should be initialized at the declaration time.
----Array size should be a constant expression and not a variable.
----We can retrieve array elements by specifying the element's corresponding index
value

Example-1
------------
export {}
let
employee:string[]=["Saurabh","Harish","Amita","Manjeet","Vinay","Sravani","Joe","Jo
y","Stefanie"];

console.log("------Array Printing by using Index------");


console.log("The Index value 0 will be= " +employee[0]);
console.log("The Index value 1 will be= " +employee[1]);
console.log("The Index value 2 will be= " +employee[2]);
console.log("The Index value 3 will be= " +employee[3]);
console.log("The Index value 4 will be= " +employee[4]);
console.log("The Index value 5 will be= " +employee[5]);
console.log("The Index value 6 will be= " +employee[6]);
console.log("The Index value 7 will be= " +employee[7]);
console.log("The Index value 8 will be= " +employee[8]);

console.log("----Array by using foreach Loop-----")


for(var item in employee)
{
console.log("Item :: " + employee[item] + " Index :: " + item)
}

console.log("----Array by using for Loop----")


for(var i=0; i< employee.length;i++)
{
console.log("Item :: " + employee[i] + " Index :: " + i)
}

***********************************************************************************
*************************

In object-oriented programming languages like Java, classes are the fundamental


entities which are used to create reusable components.

It is a group of objects which have common properties.


In terms of OOPs, a class is a template or blueprint for creating objects.

A class is user defined datatype, template, structure, prototype, blueprint that is


having data members and data functions

TypeScript is an Object-Oriented JavaScript language, so it supports object-


oriented programming features like classes, interfaces, polymorphism, data-binding,
etc.

JavaScript ES5 or earlier version did not support classes.

TypeScript support this feature from ES6 and later version.


TypeScript has built-in support for using classes because it is based on ES6
version of JavaSript.

Today, many developers use class-based object-oriented programming languages and


compile them into JavaScript, which works across all major browsers and platforms

Data members-----variables
Data Functions----Functions

A class definition can contain the following properties:


-----------------------------------------------------------
Fields: It is a variable declared in a class.
Methods: It represents an action for the object.
Constructors: It is responsible for initializing the object in memory.

Syntax to declare a class:


-------------------------------

export class <class_name>{


field;
method;
}

let object_name=new class_name();

Object
-------

Object is a real world entity. It is a logical entity.


for example---chair/pen/notepad/laptop

object defines State and behaviour


State---------Data
Behaviour----functionality

Object is the variable of the class.


Object is the instance of the class.
Object is the shadow of the class.
Object posses the behaviour of the class.

***********************************************************************************
*************************

Single Page Application:


---------------------------
Single Page Application- (SPA)---->Single Page Application is a web Application or
website that interacts with the user by dynamically rewriting the current page
rather than loading the new pages from the server again n again.

For Example
---------------
In case of Single Page Application, Data is important
Client-----------Request-----------Server(html/js/Images/css/Data----xml--json)

http://localhost:4200/home
http://localhost:4200-------->URL
/Home------------------------>Routes

For Example
---------------
Gmail/Google Maps/Instagram/Facebook/PayPal/NetFlix/Amonzon

***********************************************************************************
*************************

Angular is a client side JS framework which allows to create reactive responsive


Applications.

Reactive----Reactive means it will automatically referesh the page.


Resonsive---you can run on multiple devices----laptop/desktop/mobiles/IPad

Angular is a client side JS framework which allows to create reactive responsive


Applications.
Angular is a Client Side JS Framework
Angular is an Open Source
Angular support Single Page Application(SPA)
Angular is a JS framework which runs on dev server----Node.JS
For Production, we can deploy, IIS, MACOS, LINUX

Angular is a Binding Framework


Angular is a component based programming
Angular internally uses the Typescript, which is developed by the Microsoft
Typescript----Open Source-----supports----Object oriented programming.

Angular run on by Default port number 4200


Angular is meant for creating Light weight UI
Angular does not support database connectivity because of the client side framework
-----Express.js/ Web Api /Dotnet Core Web API

Angular supports Routing, that means you can navigate from one components to
another components
Angular uses the Mobile First Approach
Typescript does not understand the browser.

Typescript(ts)-----tsc compiler-----Javascript(js)-------DOM------Browers

File.ts---------------tsc compiler---------------File.js

***********************************************************************************
*************************

How to create an application to an Angular


----------------------------------------------

ng new Application_name
ng----------------------------->Angular
new---------------------------->New Application
Application_name--------------->Name of the Application

C:/AngularTraining> ng new FirstApp


----------------->routing-----N
----------------->CSS-----Enter
C:/AngularTraining> cd FirstApp
C:/AngularTraining/FirstApp>code .

***********************************************************************************
*************************

Execution of ng serve
-------------------------

ng serve -o
ng serve
npm start

It create 5 files
---------main.js
---------Style.js
---------vendor.js
---------polyfills.js
---------runtime.js

***********************************************************************************
*************************
Component
-------------

A component has a selector, template, style and other properties, using which it
specifies the metadata required to process the component.

Compoents are meant for creating the tags.

Components are the most basic building block of an UI in an Angular application.

An Angular application is a tree of Angular components.

Angular components are a subset of directives. Unlike directives, components always


have a template and only one component can be instantiated per an element in a
template.

Components are like the basic building block in an Angular application.

A Component is defined using the @Component decorator. Inside the @Component


decorator, you can define the component selector, the component template, and the
related style.

Components are special classes that interact with the .html file of the component,
which gets displayed on the browser. Or we can say Component is a collection of
template, class and metadata.

Component in Angular is a class with a template and a


decorator

Template
Class
Decorator

Template defines the user interface. It Contains the HTML,Directives and data
bindings.

Class contains the code required for the template

Decoator add meta data to the class making it an Angular Component.

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

@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent {
}

***********************************************************************************
*************************
Commands for Components
-----------------------------

ng g c First
ng g c Second --skip-tests
ng g c Third --skip-tests --inline-style=true
ng g c Fourth --skip-tests --inline-template=true

***********************************************************************************
*************************

Data Binding is one of the most powerful and important features in any software
development languauage.

DataBinding allows you to define communication between the components and view, So
we can say that Data binding is passed from component to view and from view to the
component

Component---ts-------template----html
template----html-----component----ts

Data Bindings are of 2 Types


------------------------------
----Single Way Data Binding
----Two Way Data Binding

Single Way Data Binding-----Single Way Data Binding is a communication from


component to template or template to component

ts---html or html----ts

Single Way Data Binding is divided into 4 types


-------------------------------------------------
String Interpolation-----------{{}}
Property Binding---------------[]
Attribute Binding--------------attr
Event Binding------------------()
Two Way Data Binding-----------[()]----ngModel-----banana casing
***********************************************************************************
*************************
String Interpolation-------{{}}
--------------------------------

String Interpolation is used to communicate from component to html and it is used


to bind string values.

It is communication from ts----html


It is denoted by {{}}

If we declare the varaible inside the class we dont require let keywords because
it says
Unexpected token, Need Constructor, Method, accessor or property was expected

***********************************************************************************
*************************
Property Binding
-----------------------

Property Binding is a communication from component to template, i.e ts----html


Interpolation works only with the string values.

There are some html properties that are boolean properties, which may need to bind,
for that we may need to use Property Binding.

Property Binding allows us to bind the view of the template expression

Property Binding is denoted by []

***********************************************************************************
*************************
Attribute Binding------------attr-----
-------------------------------------------

Attribute Binding is same as the property Binding with the difference that we need
to add attr as prefix with attribute name.

Attribute Binding is useful where we dont have any property view with respect to an
HTML attributes.

[attr.property_name]=value;
bind-attr.property_name=value;
attr.property_name={{value}};

***********************************************************************************
*************************
Event Binding----------------()
Event Binding is a communication from template to component, html----------ts

Event Binding is defined as the updating/sending of the value/information of a


certain variable from the template to the component

***********************************************************************************
*************************

Two Way Data Binding


----------------------
------is an communication from template to the component and component to the
template
------combination of Property Binding and Event Binding
------[()]----Banana Casing
------We need to use ngModel
-----import @angular/forms

***********************************************************************************
*************************

@Input is used to define an input property to achieve component property binding.

@Input decorator binds a property within one component (child component) to receive
a value from another component (parent component).

This is one way communication from parent to child. The component property should
be annotated with @Input decorator to act as input property.

A component can receive a value from another component using component property
binding. Now we will see how to use @Input. It can be annotated at any type of
property such as number, string, array or user defined class. To use alias for the
binding property name we need to assign an alias name as @Input(alias).

Input Property----@Input()----angular/core----[]

***********************************************************************************
*************************

Output()----Output is used to define the output property to achieve custom event


binding
If you want to move the data from child to parent then we need to use Output
property.
Output Property------@angular/core-------------------()=""

@Ouput decorator binds a property to send data from one comonent(child component)
to calling the component(parent component)

@Ouput() decorator------EventEmitter<>--------emit-----

Output is used to define output property to achieve custom event binding

@Output decorator binds a property of a component to send data from one component
(child component) to calling component (parent component).

This is one way communication from child to parent component.

@Output binds a property of the type of angular EventEmitter class.

This property name becomes custom event name for calling


component. @Output decorator can also alias the property name as @Output(alias) and
now this alias name will be used in custom event binding in calling component.
***********************************************************************************
*************************
@angular/router

Implements the Angular Router service , which enables navigation from one view to
the next as users perform application tasks.

Defines the Route object that maps a URL path to a component, and the RouterOutlet
directive that you use to place a routed view in a template, as well as a complete
API for configuring, querying, and controlling the router state.

Import RouterModule to use the Router service in your app.

What is Routing
-------------------
Routing allows you to move from one part of the application to another part or one
View to another View.

The Angular Router Module


-----------------------------
The Router is a separate module in Angular. It is in its own library package,
@angular/router. The Router Module provides the necessary service providers and
directives for navigating through application views.

Using Angular Router you can


--------------------------------

Navigate to a specific view by typing a URL in the address bar


Pass optional parameters to the View
Bind the clickable elements to the View and load the view when the user performs
application tasks
Handles back and forward buttons of the browser
Allows you to dynamically load the view
Protect the routes from unauthorized users using Guards.

Route
-----------
Route tells the Angular Router which view to display when a user clicks a link or
pastes a URL into the browser address bar. Every Route consists of a path and a
component it is mapped to. The Router object parses and builds the final URL using
the Route

Routes
-----------
Routes is an array of Route objects our application supports

RouterOutlet
---------------
The outerOutlet is a directive (<router-outlet>) that serves as a placeholder,
where the Router should display the view

RouterLink
----------------
The RouterLink is a directive that binds the HTML element to a Route. Clicking on
the HTML element, which is bound to a RouterLink, will result in navigation to the
Route. The RouterLink may contain parameters to be passed to the route’s component.

RouterLinkActive
-------------------
RouterLinkActive is a directive for adding or removing classes from an HTML element
that is bound to a RouterLink. Using this directive, we can toggle CSS classes for
active RouterLinks based on the current RouterState

ActivatedRoute
------------------
The ActivatedRoute is an object that represents the currently activated route
associated with the loaded Component.

***********************************************************************************
*************************

Angular Service
-------------------

We might come across a situation where we need some code to be used everywhere on
the component. It can be for data connection that needs to be shared across
components, etc. Services help us achieve that. With services, we can access
methods and properties across other components in the entire project.

A Service in Angular is generally used when you need to reuse data or logic across
multiple components.

***********************************************************************************
*************************
HttpClient
------------

HttpClient is a injectable class which supports Dependecy Injection, you need to


pass to the constructor

HttpClient class supports all the verbs for performing crud operations
-----Get()
-----Post()
-----Put()
-----Delete()

HttpClient supports promised based API as well as obervable based API.

HttpClient class supports obervable- means publisher/subscriber principle

HttpClient supports HttpInterceptor for sending tokens by Httpheader to service

HttpClient supports global exception or streamlined error handling.

HttpClient class supports RXJS Library and provides several operators like
Map,filter,retry,forkjoin

Importing the Package:


-------------------------
import {HttpClientModule} from '@angular/common/http'----app.module.ts

***********************************************************************************
*************************
Directives
--------------

Directives are the important feature of an Angular Application and plays a vital
role in Angular Project

With the help of directive, we can easily manipulate our DOM Layout.

Directives are of 4 Types


1. Component Directive
2. Strcutural Directive
3. Attribute Directive
4. Custom Directive

***********************************************************************************
*************************

Component Directive
---------------------

It is mainly used to specify the HTML template.


It is most commonly used directive on Angular Project

It is decorated with the @Component decorator.Components are directives.


The directive is a class.The Component directive is used to specify template/HTML
for the DOM Layout.

import {Component} from '@angular/core'

@Component({
selector: app-root,
templateUrl: './app.component.html',
styleUrl: [./app.component.css]
)}

***********************************************************************************
*************************

The Structural Directive is used to add or remove the HTML elements in the DOM
layout, by adding, removing or manipulating the elements.

There are 3 inbuilt Structural Directive


----ngIf
----ngFor
----ngSwitch

----------------------------------
ngFor-----------------------------------------------------------

*ngFor is a built in Structural Directive that is used to iterate over the


collection like an array.

----------------------------------ngIf---------------------------------
The *ngIf directive is used when you want to display or remove an element based on
the condition
----------------------------------ngSwitch---------------------------------
ng Switch is a directive which is based to an expresssion.

It is used to display an element tree based on the set of many elements.

ngSwitch
We bind an expression to it

ngSwitchCase
It defines an elements with the matched value, we neeed to provide the * before it

ngSwitchDefault
This is the default case which will be executed if no match is found.

***********************************************************************************
*************************
Attribute Directive
---------------------

Attribute Directive is used for change the appearance or behaviour of an element,


component or another directive.

Attribute Directive are of 2 types


----ngClass
----ngStyles

----ngClass
--------------Angular ngClass is inbuilt directive in Angular that allows you to
set the CSS class dynamically for the DOM element

-------------The ngClass directive is used to set a CSS class dynamically based on


custom condtions.

-------------It is used to add or remmove CSS classes on a HTML element.

There are different ways to bind ngClass


----string
----Arrays
----objects

----The ngClass directive dynamically binds one or more CSS classes to an HTML
elements.
----If it is a string, it should contain one or more classes, provided space
separated class names

***********************************************************************************
*************************
Style Binding
----------------

In Angular, Style Binding is used to apply inline styles to an HTML elements.

The Syntax of Style Binding is similar to the property binding

[style.style-property]="style-value";

***********************************************************************************
*************************

HostListener-------In Angular, the @HostListener() function decorator which allows


you to handle the events of the host elements in the directive class.

HostBinding
------------------
HostBinding----In Angular, the @HostBinding-() function decorator which allows you
to set the properties of the host elements in the directive class.

***********************************************************************************
*************************
Bootstrap
------------

Bootstrap is a free, open source and is the most popular HTML, CSS and JavaScript
framework developed by twitter for creating responsive web applications

Advantages of using Bootstrap


---------------------------------

Supports responsive design


Saves lot of development time
Consistency
Customizable
Support

Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins.

Bootstrap also gives you the ability to easily create responsive designs

Responsive Web Design


--------------------------
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops

Why Use Bootstrap


Advantages of Bootstrap:
-----------------------------

Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap

Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and


desktops

Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core


framework

Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome,


Firefox, Internet Explorer, Edge, Safari, and Opera)
Where to Get Bootstrap:
----------------------------

There are two ways to start using Bootstrap on your own web site.

Download Bootstrap from getbootstrap.com


Include Bootstrap from a CDN

Containers
----------------
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:

The .container class provides a responsive fixed width container

The .container-fluid class provides a full width container, spanning the entire
width of the viewport

***********************************************************************************
*************************
Install the BootStrap
--------------------------

npm install --save [email protected]


npm install jquery --save
npm install popper.js --save

Angular.json:

"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Style.css:

@import '~bootstrap/dist/css/bootstrap.min.css';
***********************************************************************************
*************************
Angular Forms
----------------
Forms are vital to business applications
We can use forms to register, Login and submit a request, place an order.
Schedule an appointments or any other operations.

For Developers
---------------
----Data Binding
----Error Message
----Validation
----Form Submission
----Visual Feeedback
----Change tracking

There are 2 types of forms in Angular


----Template Driven Form
----Reactive Driven Form

***********************************************************************************
*************************

Template Driven Form


-----------------------------

----Easy to use and similar to Angular JS forms.


----Two way Data Binding with ngModel
----Suitable for Simple scenarios
----Unit Testing is a challenge.
----In Template Driven Approach, there is no structure and taken from Angular JS
----If you want to go with light weight form then go with Template Driven form
----In case of Template Driven Form, it is just like an HTML Programming

ngModel-------Binding the HTML control with the variable name


[ngModel]-----Binding the HTML control with the variable name with one way data
binding
[(ngModel)]---Binding the HTML control with the variable name with two way data
binding

There things need to be used in Template Driven Form


------------------------------------------------------

ngForm---------------name of the form


ngSubmit------------Action----calling the function
ngModel-------------Binding the HTML control with the variable name
#---------------------# Creating the form

***********************************************************************************
*************************

Reactive Driven Form-------Model Driven Approach-----Strongly Typed forms


In Reactive Driven Approach-----structure first------Making----UI

Reactive Driven Form


---------->@angular/form------ReactiveFormModules

-------->FormBuilder-----Injectable class-----DI----pass to the constructor------


Group----return Type---FormGroup
-------->FormGroup-------Creating an object of formGroup and Providing to the form
-------->FormControl-----Binding the Controls
-------->Validator-------Providing the Validations

FormBuilder----Injectable class----Supports----DI----pass to the constructor---


fromBuilder----function---Group----return type----FormGroup Class.

FormBuilder needs to define in the constructor.

FormBuilder
FormGroup
FormControl
Validator

***********************************************************************************
*************************

Angular Pipes:
-----------------

Angular Pipes transforms data before display.

In Angular we have built-in pipes and custom pipes

In Angular, we have built-in pipes which includes


---lowercase
---uppercase
---titlecase
---date
---percent
---decimal
---json
---currency

***********************************************************************************
*************************

***********************************************************************************
*************************

You might also like