Angular-

18
FULL
COURSE
 INTRODUCTION

 Angular is a platform and framework for building

single-page client applications using HTML and
TypeScript.
 Developed and maintained by Google
 Angular is one of the most popular frameworks for
web development.
 It provides a comprehensive solution that includes
tools and libraries for building, testing, and
maintaining web applications.
 Latest version is Angular 18 & it’s released on May
22th 2024.
 ADVANTAGE

 Custom and reusable components

 Productivity and code consistency
 Cross platform support
 Improved speed & performance
 Supports for unit testing
 Material UI support
 Open source
 Topics

 Introduction
 Advantage of Angular
 System setup
 Angular installation
 Angular CLI commands
 Create new application
 Angular folder structure review
 Angular Templates
 Material UI
 Topics

 Components
 Interpolation
 Pipes
 Property Binding
 Two way binding
 Event Binding
 Angular Module
 Angular Routing
 Angular Guards
 Lazy loading
 Topics

 Directives
 Angular Forms
 Services
 Http interceptor
 Consume secured .NET API
 Transfer data between components
 Angular Signals
 Control flow Templates
 Deferable view
 Topics

 Basic crud actions

 Rxjs basics
 NGRX
 NG-Content
 Zone less change detection
 SSR
 NGX- Toaster
 NGX-Mask
 Deployment in IIS Server
 System setup

 Angular can run windows , Linus and Mac

operating system
 Install latest version of Node.js (current latest
version is 22.4)
 Install Angular CLI

 This command install the latest version

npm install -g @angular/cli
 Install the specific version mention the version
also in the command
Ex - npm install -g @angular/cli@17
 Uninstall angular CLI using this command
npm uninstall -g @angular/cli
 Install Angular CLI

 This command install the latest version

npm install -g @angular/cli
 Install the specific version mention the version
also in the command
Ex - npm install -g @angular/cli@17
 Uninstall angular CLI using this command
npm uninstall -g @angular/cli
 Angular CLI Commands

Action Command

Create App Ng new application name

Create component Ng g c <component name>

Create Module Ng g m <module name>

Create Service Ng g s <service name>

Create Guard Ng g g <guard name>

 Angular Project
template
 Module based template – it’s default template
up to angular 16 from angular 17 we have to
include “no standalone” keyword while project
creation.
Ex - ng new <projectname> --no-standalone
 Standalone Template – New template
introduced in angular 17(there is no app.module
file)
 Material UI

 Material UI is a popular library for implementing

Material Design components in web applications.
 Angular has its own implementation called
Angular Material, which provides a set of
reusable, well-tested, and accessible UI
components based on Google's Material Design
specifications.
 Components

 Angular components are the core building blocks of

Angular applications.
 They represent a portion of the user interface (UI) and
encapsulate the logic and view associated with that
part of the UI.
 Each component in Angular consists of three main
parts

1, TypeScript Class - This contains the logic and data for

the component.
2, HTML Template - This defines the view of the
component, which is what gets rendered in the browser.
3, CSS Styles - These are the styles specific to the
component.
 Interpolation

 Interpolation is a special syntax that allows you to

embed expressions within your HTML template.
 It's a way to dynamically insert values and
display them in the view.
 The syntax for interpolation is double curly braces
{{ }}, and within these braces, you can place any
valid JavaScript expression.
 Pipes

 Angular pipes are a powerful feature that allows you to

transform data directly in your template.
 They are simple functions that can be used to format,
transform, and display data in an Angular application.

1, DatePipe
2, UpperCasePipe
3, LowerCasePipe
4, CurrencyPipe
5, DecimalPipe
6, PercentagePipe
7, JsonPipe
 Property Binding

 Property binding is a technique for setting

property values dynamically.
 It is one of the key features of Angular that helps
create dynamic and interactive web applications.
 The property binding syntax uses square brackets
[] to bind to an element's property.
 Two way binding

 Two-way binding allows for the synchronization of

data between the model and the view.
 It means that any change in the model is reflected
in the view and vice versa.
 This is particularly useful for forms and input
controls.
 Two-way binding is achieved using the
[(ngModel)] directive.
 This directive combines both property binding and
event binding:
 Event Binding

 Event binding allows you to listen to and respond

to events triggered by user interactions, such as
clicks, keystrokes, mouse movements, etc.
 Event binding enables you to execute logic in
response to these events directly in your
component's TypeScript code.
 Event Binding

 Event binding allows you to listen to and respond

to events triggered by user interactions, such as
clicks, keystrokes, mouse movements, etc.
 Event binding enables you to execute logic in
response to these events directly in your
component's TypeScript code.
 Syntax ()
 Angular Module

 Angular module is a place where you can group

the components, directives, pipes, and services,
which are related to the application.
 They help to keep the codebase modular,
reusable, and easy to manage.
 Angular applications are built by composing
modules together.
 Angular Routing

 Angular routing is a mechanism that allows you to

navigate between different views or pages in an
Angular single-page application (SPA) without
reloading the entire page.
 It enables users to navigate through the
application by clicking links, entering URLs, or
using browser navigation buttons.
 Angular Guards

 Angular guards are used to control navigation and

access to certain routes in an Angular application.
 They are interfaces or functions that can be
implemented to enforce rules or restrictions on
route activation (navigation).
 Angular provides several types of guards
1, CanActivate (home , Login)
2. CanActivateChild
3, CanDeactivate (home , any)
4, CanMatch
 Lazy loading

 Lazy loading in Angular is a technique that allows you to load

modules asynchronously when the user navigates to their
corresponding routes.
 This improves the initial loading time of the application by
splitting it into smaller bundles that are loaded on-demand.
 Lazy loading is beneficial for large Angular applications
because:

Improved Performance: Only essential modules and components

are loaded initially, reducing the initial load time and improving the
application's perceived performance.
Reduced Initial Bundle Size: By splitting the application into smaller
bundles, the initial bundle size is reduced, which speeds up the
application load time.
Better User Experience: Users experience faster navigation as they
only load the modules they need when they navigate to specific routes.
 Angular Hooks

 ngOnchanges
 ngOnInit
 ngDoCheck
 ngAftercontentInit
 NgAfterContentChecked
 NgAfterViewInt
 NgAfterViewChecked
 Directives

 directives are special markers attached to

elements in the DOM (Document Object Model)
that extend their behavior or modify the DOM
structure.
 Directives are a fundamental building block of
Angular applications and are used to build
reusable components, add behavior to elements,
and manipulate the DOM.
 There are 3 types of directive

1, Component Directives
2, Attribute Directives
3, Structural Directives (*ngIf , *ngFor,
*ngSwitch)
 Angular Forms

 Angular forms are a critical part of

building interactive web applications
where users can input data, submit it,
and interact with the application's
features.
 Angular provides two approaches for
building forms: template-driven forms
and reactive forms.
 Template Driven Form

 Template-driven forms in Angular are a

simpler way to create forms using
directives in the template itself.
 They rely heavily on Angular's two-way
data binding syntax ([(ngModel)]) to link
form controls to properties in the
component class.
 This approach is ideal for scenarios
where you need to quickly set up forms
with minimal custom validation or
complex data handling.
 Reactive Forms

 Reactive forms in Angular provide a more

flexible and scalable approach to building
forms compared to template-driven
forms. They are built programmatically
using classes to represent form controls,
form groups, and form arrays.
 Reactive forms are ideal for complex
forms with dynamic validation
requirements and offer better support for
unit testing and maintainability.
 Services

 Services are a fundamental part of the

architecture used for organizing and
sharing code across different parts of
your application.
 They are a way to encapsulate reusable
functionality, data, or logic that doesn't
belong in a component.
 Services help in promoting modularity,
reusability, and maintainability by
keeping components lean and focused on
their primary role
 Http interceptor

 HTTP Interceptors are middleware

components that allow you to intercept
HTTP requests or responses globally
before they are sent to the server .
 They provide a way to modify or handle
HTTP requests or responses across an
entire application in a centralized
manner.
 Consume secure .NET
API
 We have to use the api end point in
services
 Pass secured token through header
 Transfer data between
components
 @input – parent to child
 @output – child to parent
 Unrelated components we can use below
options
1, Services
2, Signals
3, RxJs subjects
4, NGRX
 Angular Signals

 Angular signals wrap around a value (holds a

value) and then notifies the user of any
changes.
 To modify signal values we can used SET,
Update and Mutate
 It has 2 inbuilt functions & conversion methods
1, Computed – If any changes in signals it will
calculate automatically.
2, Effect – This will be executed any changes in signals
Conversion
1,ToSignal – convert observable to Signal
2,ToObservable – convert Signals into Observable
 Control flow template

 In Angular templates, control flow refers

to the ability to conditionally render HTML
elements or apply logic based on certain
conditions.
 Angular provides several directives and
techniques to control the flow of content
within templates.
1, @if
2, @for
3, @switch
 Deferable view

 Angular allows you to defer the loading of

modules, components, or routes until
they are actually needed.
 This is particularly useful for large
applications where loading all modules
upfront may impact performance
negatively.
 Angular's lazy loading feature helps in
optimizing initial load times by loading
only the necessary parts of the
application on demand.
 Json-Server API

 JSON Server is a useful tool for quickly

creating a mock REST API server using a
JSON file as a data source.
 It's often used in development and
testing scenarios where you need to
simulate a backend API without actually
implementing one.
 Basic crud actions

 Crud using modal popup

 RxJs

 RxJS (Reactive Extensions for JavaScript)

is a powerful library for reactive
programming using observables.
 It allows you to work with asynchronous
data streams and provides a wide range
of operators to transform, combine, and
manage these streams.
 RxJS is an essential part of Angular and is
widely used in modern JavaScript
applications for handling events,
asynchronous operations, and data flow.
 NGRX

 NgRx is a set of libraries for Angular

applications that implement reactive
state management patterns using RxJS.
 It's inspired by Redux, a popular state
management library for JavaScript
applications, and it provides a predictable
state container for managing application
state in large-scale Angular applications.
 NG-Content

 ng-content is a directive that serves as a

placeholder within a component's
template.
 It allows you to project content from the
parent component into the child
component's template.
 This is especially useful for creating
reusable components that can accept
different content based on where they are
used.
 Zone less change
detection
 In Angular, "zone-less change detection"
refers to a technique where Angular's
change detection mechanism is modified
or optimized to reduce or eliminate the
dependency on NgZone.
 NgZone is a core Angular service that
helps manage asynchronous operations
and ensures that Angular's change
detection runs properly within the context
of browser events, timers, and other
asynchronous tasks.
 SSR

 SSR stands for Server-Side Rendering.

 In the context of Angular (and other
JavaScript frameworks like React and
Vue), SSR refers to the technique of
rendering the initial HTML of a web
application on the server, rather than in
the browser.
 This approach provides several
advantages over traditional client-side
rendering (CSR)
 NGX- Toaster

 NGX-Toastr is a popular library for

displaying toast notifications in Angular
applications.
 Toast notifications are non-intrusive
messages typically used to provide
feedback to users about operations or
updates without disrupting their workflow.
 NGX-Toastr simplifies the implementation
of toast notifications with customizable
options for styling, positioning, and
behavior.
 NGX-Mask

 NGX-Mask is a library for Angular

applications that provides a simple way
to add input masks to form fields.
 Input masks restrict the input that users
can enter into an input field by enforcing
a specific format, such as dates, phone
numbers, credit card numbers, and more.
 This helps improve user experience by
guiding users to enter data in a
structured format and reduces errors.
 Deployment in iis server

 Create build using ng build

 Create site in iis server
 Move build artifact to website folder
NIHIRA TECHIEES THANKS FOR
WATCHING
PLEAE STAY
TUNED
FOR
PART - 2