ANGULAR

PRESENTED BY
SUNANDA GHOSH
&
ARPAN ADHIKARI
SOFTWARE DEVELOPER
 2

WHAT IS ANGULAR?
Angular is open source javascript framework
written in typescript its main purpose to develop
single page applications. Angular is popular
framework for building dynamic ,responsive web
applications. It provides several functionalities ,
such as routing, HTTP request, and form handling
saving developers much time and effort.
 3

TEMPLATE DRIVEN FORM

 4

A template-driven form is the simplest way to build a form in

Angular. It uses Angular’s two-way data-binding directive
(ngModel) to create and manage the underlying form instance.
Additionally, as the name suggests, a template form is mainly
driven by the view component. So, it uses directives placed in HTML

When to use Template Driven Forms:

When your app have basic and simple requirement for forms such
as sign in, you should use template-driven forms.
 5
NgModel: The NgModel directive is used to bind input
elements to properties in the component class.
It enables two-way data binding, meaning changes to the input
element in the template are reflected in the component class
and vice versa.

Ngform: Create a top-level FormGroup instance and bind it to

a <form> element to track aggregated form value and validate
status. As soon as we import FormsModule, this directive
becomes active by default on all <form> tags.

NgModelGroup: Create and binds a FormGroup.

REACTIVE FORM
Reactive Forms are a source to manage a specific form state
at a particular instant of time. They are a source to ensure 7
the union of your data along with all the changes updated in
the source location. It also provides dynamic form validation
in which the inputs and values are to be accessed.
Reactive forms can easily be tested as the developer is sure
of the data consistency within the form. They provide
features such as-
• Safe access to the data model
• Tracking changes through different predictable streams
• Different operators providing immutability of data
 8
When to use Reactive Forms:
If forms are very important for your app, or
reactive pattern are used in your app, you should
use reactive forms.

Note:if your using reactive form also import

FormModule and ReactiveFormModule in
appmodule or specific component module.
9
 10
Characteristic of Reactive Forms

• FormControl Each input element in the form is ‘FormControl’.

The ‘FormControl’ tracks the value and validation status of form
fields.

• FormGroup Track the value and validate the state of the group
of ‘FormControl’.

• FormBuilder Angular service which can be used to create the

‘FormGroup’ or FormControl instance quickly.

• Form Array That can hold infinite form control, this helps to
create dynamic forms.
 11

SERVICES
 12

Introduction to Services:
Simply put, services in Angular let you define code or functionalities that are
then accessible and reusable in many other components in your Angular
project. Services help you with the abstraction of logic and data that is
hosted independently but can be shared across other components.
The service class has a single, well-defined function, helping you make your
application structure very modular. It is different from other classes in
Angular because of the injection process. Dependency injection is the
concept that makes it possible for you to receive dependencies from one
class to another.
 13
Creating the Service:
To create a service in Angular, you need to run the generate
service command:

ng generate service data

Two new files will be created. Navigate to the data service.ts file.
 14

Registration of Angular Service

At this stage, Angular takes this service as any other Angular class, so to
make sure Angular counts it as a service, we have to register it. It is also
important to note the hierarchical way Angular handles things like
dependency injection. Anywhere you register your service, dependencies
can only be injected into the said component or the child nodes. So for our
case, we are going to register it at the root module.
Navigate to your app module file and make sure it looks like this:
Using the Service 15
To use the service we have set up in our project, all we need to do is to import it
where needed and bring functions from it through the component’s constructor.
In your artist component, copy this code block below into it:
 16

RXJS (REACTIVE EXTENSIONS FOR JAVASCRIPT)

 17

In Angular, RxJS (Reactive Extensions for JavaScript) is commonly used for

handling asynchronous operations, event handling, and managing streams
of data. It's an integral part of Angular because it facilitates reactive
programming, making it easier to manage complex asynchronous code and
handle data flow within Angular applications.

Installation: RxJS is usually included by default when you create a new

Angular project using the Angular CLI (ng new). However, if you need to
install it separately, you can do so using npm or yarn:
npm install rxjs
 18
Importing Observable: Observables are at the heart of RxJS. They represent a
stream of data over time. You can import Observable from RxJS in your Angular
components, services, or other files where you need to work with streams of data:
import { Observable } from 'rxjs’;

Creating Observables: You can create observables using various methods

provided by RxJS, such as of, from, interval, fromEvent, etc. For example, to create
an observable that emits a sequence of numbers:

import { of } from 'rxjs’;

const numbers$: Observable<number> = of(1, 2, 3, 4, 5);
 19
Subscribing to Observables: Once you have an observable, you typically
subscribe to it to receive emitted values and handle them:

numbers$.subscribe(
value => console.log(value), // onNext
error => console.error(error), // onError
() => console.log('Complete') // onComplete );
 20

Operators: RxJS provides a rich set of operators to transform,

filter, combine, and manipulate observables. You can use
operators like map, filter, mergeMap, switchMap, etc., to perform
various operations on the data streams:

Schedulers: are centralized dispatchers to control concurrency,

allowing us to coordinate when computation happens on e.g.
setTimeout or requestAnimationFrame or others.

Subjects: : is equivalent to an EventEmitter, and the only way of

multicasting a value or event to multiple Observers.
 21

LAZY LOADING
 22
What is Lazy Loading?
Lazy loading is the process of loading components, modules, or other
assets of a website as they're required.

Since Angular creates a SPA (Single Page Application), all of its

components are loaded at once. This means that a lot of unnecessary
libraries or modules might be loaded as well.
For a small application this would be okay. But as the application grows
the load time will increase if everything is loaded at once. Lazy loading
allows Angular to load components and modules as and when they're
needed.
THANK
YOU