This document provides an introduction to Angular, a framework built with TypeScript, detailing its architecture, environment setup, and basic building blocks like components and modules. It explains key concepts such as services, dependency injection, directives, and data binding while offering commands for Angular CLI usage. Additionally, it discusses routing, templates, and decorators, essential for Angular application development.

1. For Angular Online Training : +91-999 123 502
Introductionto
Angular
Imdad Manik 1

2. •Angular is written in TypeScript. It
implements core and optional functionality
as a set of TypeScript libraries that you
import into your applications. The
architecture of an Angular application relies
on certain fundamental concepts. The basic
building blocks of the Angular framework
are Angular components.
Introduction to Angular
Imdad Manik 2

3. Angular Environment Setup
 Install Node.js which includes Node Package Manager
(npm). https://nodejs.org/en/download/
 Visual Studio Code.
https://code.visualstudio.com/download
 Install the Angular CLI globally.
npm install -g @angular/cli
 Create Project.
ng new hello-world
cd hello-world
 Install project dependencies.
npm install
 Run the Application.
ng serve / npm start
Imdad Manik 3

4. Angular CLI Options
Options Usage
Help ng --help
Build ng build --env
Build and Run ng serve
Testing ng test
End-End Testing ng e2e
Imdad Manik 4

5. Angular CLI Commands
Scaffold Usage In Short
Module ng generate module my-module ng g m my-module
Component ng generate component my-component ng g c my-component
Directive ng generate directive my-directive ng g d my-directive
Pipe ng generate pipe my-pipe ng g p my-pipe
Service ng generate service my-service ng g s my-service
Guard ng generate guard my-guard ng g g my-guard
Class ng generate class my-class ng g cl my-class
Interface ng generate interface my-interface ng g i my-interface
Enum ng generate enum my-enum ng g e my-enum
Imdad Manik 5

6. Angular Initialization Process
Imdad Manik 6

7. Angular Building Blocks
• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Pipes
• Routing
• Forms
• Services
• Dependency injection
Imdad Manik 7

8. • A module organize an application into unified blocks of
functionality
• An Angular module is a class with an @NgModule
decorator
• Accepts a single metadata object whose properties
describe the module
• Each Angular app must have at least one module, known
as root module
Modules
Imdad Manik 8

9. Modules
Imdad Manik 9

10. • imports – Specify other dependent modules whose classes are
required by the component templates declared in the module
• declarations – Specify the components, directives, and pipes that
belong to the module
• bootstrap – Specify the main app view i.e root component. Only
the root module can have this bootstrap property
• exports – A subset of declarations that will be visible and usable
in the other modules. A root module doesn’t have export option.
• providers – Specify the services, accessible across the app
NgModule Metadata Main Properties
Imdad Manik 10

11. • Angular has built-In library modules starting with the @angular
as prefix
• Built-In library & third part modules can be installed using npm
manager
• Built-In modules, components, services, directives etc. can be
imported by using built-In library modules
Built-In Modules
Imdad Manik 11

12. • A type of directives with template, styles and logic for
user interaction
• Exported as a custom HTML tag like as:
 <my-component></my-component>
ng g c my-component
Component
Imdad Manik 12

13. Angular Components Page View
ROOT COMPONENT
HEADER COMPONENT
FOOTER COMPONENT
ARTICLE
COMPONENT
COMMENTS
COMPONENT
CATEGORIES
COMPONENT
NEWS FEEDS
COMPONENT
Imdad Manik 13

14. Component Example
Imdad Manik 14

15. • Define the view of a component
• Contains Html markup and angular directives, attributes etc.
• Describe how a component is rendered on the page
Template
Imdad Manik 15

16. • A function that adds metadata to a class, class members
• These are prefix with @ symbol
• Angular has built-In decorators like - @Component,
@NgModule, @Directive, @Pipe etc.
Decorators
Imdad Manik 16

17. • Class decorators
 @NgModule – Used for defining a module
 @Component – Used for defining a component
 @Directive – Used for defining a directive
 @Injectable – Used for injecting dependencies
 @Pipe – Used for defining a pipe
• Class field decorators
 @Input – Used for receiving data (input)
component
 @Output – Used for passing data (events)
component
from parent to child
from child to parent
Types of Decorators
Imdad Manik 17

18. • Tells Angular how to process a class
• Decorators are used to attach metadata to a class
Metadata
Imdad Manik 18

19. Data Bindings
String Interpolation: Text is between a set
of curly braces often uses the name of a
component property. The syntax of string
interpolation is to use double curly
braces {{ code }}.
Property Binding: Updating the value of a
certain variable in component (model)
and displaying it in view (presentation
layer).
Imdad Manik 19

20. Event Binding
• Event Binding: Event binding is defined as the updating/sending of
the value/information of a certain variable from the presentation
layer (view) to the component (model). For example, clicking a
button.
Imdad Manik 20

21. Routing
Angular Routing allows for
navigation between components
and enables the changing of part
of a page, hence the reasoning
for developing single page
applications. Routing uses the
URL in the address bar to change
components.
Imdad Manik 21

22. Directive (Types of directives in Angular)
1.Attribute Directive
2.Structural Directive
The basic difference between a component and a
directive is that a component has a template,
whereas an attribute or structural directive does
not have a template. To understand these two
concepts, let us start by creating a simple custom
attribute directive. The directive below changes
the background color of the host element.
Imdad Manik 22

23. Structural Directive
Structural directives are responsible for HTML layout. They shape
or reshape the DOM's structure, typically by adding, removing, or
manipulating elements.
*ngIf – conditionally includes a template depending on
the value of an expression returned by a Boolean.
*ngFor – makes it simple to iterate over an array.
*ngSwitch – renders each matching view.
Imdad Manik 23

24. Component Attribute Directive Structural Directives
Component directive
is used to specify the
template/html for
the Dom Layout
Attribute directive is
used to change or
modify the behaviour
of the html element in
the Dom Layout
Structural directive used
to add or remove the
html Element in the Dom
Layout
Built in
@component
Built in
NgStyle,
NgClass
Built in
*NgIf,
*NgFor,
*NgSwitch
Difference between Component, Attribute and Structural Directives?
Imdad Manik 24

25. Event Emitter
• EventEmitter in Angular is utilized
for communication between
components. Custom events are
emitted from a child component to
its parent component through the
use of EventEmitter.
Imdad Manik 25

26. Dependency Injection
• Dependency injection (DI) is the part of the Angular
framework that provides components with access to services
and other resources. Angular provides the ability for you to
inject a service into a component to give that component
access to the service.
• Dependency injection is used to make a class independent of
its dependencies or to create a loosely coupled program
Imdad Manik 26

27. Services
• An essential component of Angular apps is Angular services. They are often used
to group together features like data retrieval, manipulation, and storage that can
be used by several components.
• Moreover, services can be utilized to carry out calculations, implement business
logic, and communicate with external APIs.
• They can be injected into components or other services using the dependency
injection system because they are declared as classes in Angular.
• In order to maintain consistency and avoid memory leaks, Angular services
are singletons which means that there is only one instance of service throughout
the entire application Imdad Manik 27

28. • ng generate service TodoService
1- Define the service class 3- Add the service to the module
2- Inject the service into a component
Imdad Manik 28

29. Thank you
• https://www.linkedin.com/in/imdadullah/
• Imdad.khas@hotmail.com
Imdad Manik 29