Angular Training

+ Practice Excercise
By Sushma

www.satvasolutions.com [email protected]
Contents
1. About angular
2. Environment Setup
3. Angular CLI
4. Evaluation of Angular
5. Angular Basics
4.1 Components
4.2 Module
4.3 Services
4.4 Dependency Injection
4.5 Decorator
6. Angular Data Binding
7. Routing
8. Angular Forms
9. Data Sharing between components
10. Pipes & Directives
11. Observables
12. HTTP Protocols
13. Best Practices for coding
14. ECMA 6 TypeScript
What is difference between UI/UX?
What is Angular?
Angular is an open-source, JavaScript framework written in TypeScript. Google maintains it, and its primary purpose is to develop
single-page applications. As a framework, Angular has clear advantages while also providing a standard structure for
developers to work with. It enables users to create large applications in a maintainable manner.
What is framework?

https://www.codecademy.com/resources/blog/what-is-a-framework/

Let's say you're building a house. You could pour the foundation and frame the house yourself. It would take a lot of time,
but you could do it. If all of that were already done for you, though, it would save you quite a bit of effort — especially if it
was done by expert home builders.

Why do we use frameworks?

Why Angular ?
Angular Architecture
Advantage of Angular
Prerequisites for angular setup

Download the installer- https://nodejs.org/en/download/

● You must to have Node.js installed. (Version check : node -v)
● You must to have NPM (Node Package Manager) installed. (Version check : npm -v)
● Editor : Visual Studio Code or Atom And so on

To install the CLI, in the command prompt, type the following commands
Installation:
npm install -g @angular/cli
Confirmation -
ng--version
Create angular first application

Step 1 : Create a folder for your application in the desired location on your system and open it on VSCode. Open a
new terminal and type in the following command to create your app folder.
ng new hello-world

Step 2 : To run the application, change the directory to the folder created, and use the ng command.

cd hello-world

ng serve

Once run, open your browser and navigate to localhost:4200. If another application is running on that address, you
can simply run the command.
Angular CLI
Angular CLI stands for Angular Command Line Interface. As the name implies, it is a command line tool for creating
angular apps. It is recommended to use angular cli for creating angular apps as you don't need to spend time installing
and configuring all the required dependencies and wiring everything together.

https://angular.io/cli
Why We Need Angular CLI?
Evolution Of Angular
https://angular-templates.io/tutorials/about/learn-angular-from-scratch-step-by-step
Folder Structure In Angular
Components

Components are the main building block for Angular

applications. Each component consists of:

● An HTML template that declares what renders

on the page

● A Typescript class that defines behavior

● A CSS selector that defines how the component

is used in a template

● Optionally, CSS styles applied to the template

How to create Component :
Run the ng generate component <component-name> command, where <component-name> is the name of your new
component.

By default, this command creates the following:

● A folder named after the component

● A component file, <component-name>.component.ts

● A template file, <component-name>.component.html

● A CSS file, <component-name>.component.css

● A testing specification file, <component-name>.component.spec.ts

Let’s Revise :
Module
Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related
to the application.

In a Module, there are following functionalities or Metadata:

● Declarations: This one contains the name of components, pipes, and directives which are present in the NgModule.

● Imports: This contains the names of other modules whose functionalities are required by the components of this
particular module.

● Exports: This is responsible for making the component template visible to other modules that can import functionalities
from this Module.

● Providers: When NgModule runs, its main function is to provide the application with services. The provider is responsible
for creating Services that the NgModule requires. The services are accessible from all parts of the App.

● Bootstrap: This is the Property of Root Module. Bootstrapping is the process which initializes the root module. The root
module is responsible for initializing all the other modules.
Sample of module file
Angular module flow
Service
What is service?
Service is a piece of reusable code with a focused purpose. A code that you will use across multiple components in your
application

Why we need services?

Angular Service Used For?
● Share logic or data across components ● Encapsulate external interactions like data access
● Services are easier to test.
● We can reuse the service at many places.
How can we create a service?
Why Dependency Injection (DI)?
https://www.youtube.com/watch?v=EzioZ9cww08

- easy to write, clean code, and easy to maintain

- easy to write and maintain unit test
- easy to share data and functionality
lously coupled from tight coupling. by using container. no local dependency
DI container: Angular Injector.
Pattern: Singleton: single instance of service.
Dependency Injection (DI)?
DI is wired into the Angular framework and used everywhere to provide new components with the services or other things
they need. Components consume services; that is, you can inject a service into a component, giving the component access to
that service class.

To define a class as a service in Angular, use the @Injectable() decorator to provide the metadata that allows Angular
to inject it into a component as a dependency.

A provider is an object that tells an injector how to obtain or create a dependency.

Note : A dependency doesn't have to be a service—it could be a function, for example, or a value.
The Dependency Injection pattern involves 3 types of classes.
1. Client Class: The client class (dependent class) is a class which depends on the service class
2. Service Class: The service class (dependency) is a class that provides service to the client class.
3. Injector Class: The injector class injects the service class object into the client class.
Decorators
Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the
original source code

https://ultimatecourses.com/blog/angular-decorators.

Types of Decorators:

1. Class Decorators (@Component and @NgModule)

2. Property Decorators (@Input())

3. Method Decorator(@HostListener)

4. Parameter Decorators(@Inject and @Injectable)

Angular Data Binding

Data binding allows Internet users to manipulate web page elements with the help of a web browser. It includes
dynamic HTML and does not require complex programming.

Types of Data Binding

1. Interpolation Binding

2. Property Binding

3. Event Binding

4. Two-way Data Binding

Interpolation Binding
Interpolation is a procedure that allows the user to bind a value to the user interface element. Interpolation
binds the data one-way, which means that data moves in one direction from the components to HTML
elements.
Property Binding
Interpolation is a procedure that allows the user to bind a value to the user interface element. Interpolation binds the
data one-way, which means that data moves in one direction from the components to HTML elements.
Event Binding
Event binding type is when information flows from the view to the component when an event is triggered. The event
could be a mouse click or keypress. The view sends the data to update the component. Unsurprisingly, it is the exact
opposite of property binding, where the data goes from the component to the view.
Two Way Data Binding
As the name suggests, two-way binding is a mechanism where data flows from the component to the view and
back. This binding ensures that the component and view are always in sync. Any changes made on either end are
immediately reflected on both. The general syntax to denote two-way data binding is a combination of Square
brackets and parentheses "[()]".

<input [(ngModel)]="random" type="text">

Routing

Routing basically means navigating between

pages.

https://www.pluralsight.com/guides/understandi
ng-purpose-routing-angular

We need to focus on concept:

1. Router Concept
2. Configuring The Router
3. Router Links
4. Route Parameters
5. Accessing Route Parameters
Angular Forms
Forms are an integral part of a web application. Practically every application comes with forms to be filled in by the users.
Angular forms are used to log in, update a profile, enter sensitive information, and perform many other data-entry tasks. In this
article, you will learn about how to create a form and validate the information filled.

There are two types of form building supported by Angular Forms.

● Template-Driven Approach
● Reactive Approach (For Array)
Template Driven Forms

The directive we need to build template-driven forms are in the FormsModule.

In template-driven forms, the form model is implicit, rather than explicit. The directive NgModel creates and
manages a FormControl instance for a given form element.

https://angular.io/guide/forms
Reactive Forms
https://angular.io/guide/forms-overview

● With Reactive forms, the component directly manages the data flows between the form controls and
the data models.
● Reactive forms are code-driven, unlike the template-driven approach.
● Reactive forms break from the traditional declarative approach.
● Reactive forms eliminate the anti-pattern of updating the data model via two-way data binding.

<input type="text" [formControl]="favoriteColorControl">

In ts file :

favoriteColorControl = new FormControl('');

Data Sharing Between two components
https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/
Way To Share Data Between Components
● Parent to child component
● Child to parent component
● Sharing data between sibling components
● Sharing data using ViewChild property
● Sharing data between not related components
Pipes
Pipes In Angular And When we use it?
Directives
1. Directives are custom HTML attributes which tell angular to change the style or behavior of the Dom elements.
https://medium.com/@venkateshece1105/concepts-of-angular-directives-527ae0ca5995
Structure Directive
Structural Directives are responsible for changing the structure of the DOM. They work by adding or removing the
elements from the DOM, unlike Attribute Directives which just change the element’s appearance and behavior.

3 most popular structural directives:

1. NgIf,
2. NgFor,
3. NgSwitch.
Attribute Directive
Attribute directives manipulate the DOM by changing its behavior and appearance.
We use attribute directives to apply conditional style to elements, show or hide elements or dynamically change
the behavior of a component according to a changing property.

NgStyle Directive is an Attribute directive used to change the styling of any DOM element on the basis of some

condition.

<p [ngStyle]="{'background': isBlue ? 'blue' : 'red'}"> I am an Attribute Directive</p>

Component Directive

Directives must be declared in Angular Modules in the same manner as components.

These form the main class having details of how the component should be processed,used at run-time. directive
in Angular is a reusable component
The other two directive types, attribute and structural, do not have templates.
It is decorated with the @component decorator.
Observables
Observables are another way of handling async tasks.
Continue…

Observables are another way of handling async

tasks.

This is a built-in utility in rxjs package.

http://jesidea.com/pakdb/angular-2-observables/

● What is Rxjs?
Basic Usage And Terms Of Observable
As a publisher, you create an Observable instance that defines a subscriber function. This is the function that is executed
when a consumer calls the subscribe() method. The subscriber function defines how to obtain or generate values or
messages to be published.

To execute the observable you have created and begin receiving notifications, you call its subscribe() method, passing an
observer. This is a JavaScript object that defines the handlers for the notifications you receive. The subscribe() call returns
a Subscription object that has an unsubscribe() method, which you call to stop receiving notifications.
Let’s take an example of create an observable
Here We Get (Subscribe) The Data Of Observable.
HTTP Protocols

You should have a basic understanding of the following:

Let’s clean up the things quickly

● TypeScript programming

● Usage of the HTTP protocol

● Angular app-design fundamentals, as described in Angular Concepts

● Observable techniques and operators. See the Observables guide.

Setup For Server Communication

Before you can use HttpClient,

you need to import the
Angular HttpClientModule.
Most apps do so in the root AppModule.
Continue ….
● You can then inject the HttpClient service as a dependency of an application class . Like : constructor(private

http: HttpClient) { }

● https://angular.io/guide/http
Intercepting Requests And Responses
Provide the interceptor:
{ provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },

multi: true option. This required setting tells Angular that HTTP_INTERCEPTORS is a token for a multiprovider
that injects an array of values, rather than a single value.
Write Interceptor for Example
ECMAScript
ECMAScript is scripting-language specification standardized by Ecma International
ECMAScript 5,6

Javascript Implements specifications given by ECMAscript.

Typescript

Typescript is open source scripting language

invented by Microsoft.

● Typescript is superset of JS.

● which means any valid JS code is
valid type script code.
● Typescript implements ECMAScript
6+ specifications.
● Not all browser supports
ECMAScript 6+
Continue…
● so Typescript transpiles code to javascript and produces ES5 compatible code which browser can understand.
● TypeScript 2.1+ is the required scripting language for Angular.
● Ahead of Time (AOT) compilation mode enables Angular to compile the templates and generates JavaScript code
during the build process. This helps us identify the errors in templates during the build-time rather than at runtime.
● type script has class, property, generics, fields, generic, access modified (public, private), enum
● compile time error detection is possible in typescript
Best Practice For Angular

1. Preventing Cross-Site Scripting

2. Content security policy (CSP)
3. Use Route Guards on the Navigation
4. Keep Updating Angular Libraries
5. Consider limiting files to 400 lines of code.
6. Do define small functions
7. Do follow a pattern that describes the symbol's feature then its type. The recommended pattern is
feature.type.ts
8. Do use dashes to separate words in the descriptive name
9. Do use consistent names for all pipes, named after their feature. The pipe class name should use
UpperCamelCase
Exercise 1
Create a student registration(Same as below image) form design using HTML & HTML5.
Exercise 2
Create a employee table (Same as below image) design.
Exercise 3
Create a employee table (Same as below image) with pagination and search functionality design. You can perform search and
pagination using javascript.
Exercise 4
Create a simple calculator design (Samas below image). Functionality you need to perform with javascript.
Exercise 5
Create a design (Same as below image) for bus ticket reservation system.
Exercise 6
Design a sales invoice receipt.
https://cdn.vertex42.com/ExcelTemplates/Images/sales-invoice-template.png
Exercise 6
Exercise 7
Exercise 8
Create a kanban board. Like create multiple lists and in a lists create card then user can move card one list to another list
Card have below fields:

1. Card Name
2. Card due date
3. Card Description
4. Card percentage
5. Card assigned users()Define any 5 user yourself.
Exercise 9
Let’s create a movie ticket booking system please check to below demo url you need to do like this
http://ngtest.satva.solutions/sushma/movieBooking/#/movie-ticket-booking
Exercise 4
Design a cascading dropdown for country ,state and city.
Exercise 11
Design a page as explained in video for collapsed expand demo.
https://drive.google.com/file/d/1ZzIFC9vW5as0w73rCQ8kbm5tVHQC2s1M/view?usp=sharing
Exercise 12
Create a web chat application in ANGULAR
Exercise 12:- create a phone book app
 Exercise 13 : Creating Reusable Angular Components
Follow the link and create by yourself using @input, @output , link :
https://medium.com/angular-in-depth/creating-reusable-angular-components-how-to-avoid-the-painful-trap-most-go-in-d531761d6c7a
 Thanks for
Listening

www.satvasolutions.com [email protected]
+91 81530 04537 www.satvasolutions.com [email protected]