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
