iPrimed Education Solutions Pvt. Ltd.

#62B, Electronics City, Phase-I, Opposite ECT PO,

Bangalore, Karnataka– 560100
India
(T) 91 - 80 65832406 / 91 - 80 40941642
www.iprimed.com

BASICS OF ANGULAR
 Index
1. Module Introduction
13. Property Binding
2. How does an app starts and loads 14. String Interpolation vs Property Binding

3. Components are Important 15. Event Binding

4. Creating new Component 16. Bindable properties and Events

5. Understanding the role of component declaration and 17. Passing and Using data with event binding

App Module 18. Two way databinding

19. Combine all form of databinding

6. Using Custom Components
20. Understand directives
7. Create components with CLI
21. Using ngIf
8. Working with component templates
22. Enhancing ngIf with else
9. Working wit Component Styles
23. Styling elements with ngStyle
10. Fully understanding the component sector
24. Applying CSS class with ngClass
11. Databinding
25. Outputting lists with ngFor
12. String Interpolation
Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Basics

How an Angular app loads and starts?

Here we will start with the fresh angular project to understand everything from the
ground.

Open the browser and hit the url localhost:4200. You will see the blank page.

Lets open app.component.html and give simple

code.

Your browser will pick the code from

app.component.html and loads the browser.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Basics

How an Angular app loads and starts?

You see the code written in app.cmomponent.html, but in fact it is not the file which
angular looks for, instead the index.html file is what served by server.

Index.html is the single page which is served by the angular.

In the index.html we can see <app-root></app-root>

Whatever we write between the <app-root>, does not show up in browser. <app-root> is

not the default html elements, in fact it is one of our own components.
Components are the key features of Angular. The whole application is built by using
different components. The core idea behind Angular is to build components. They make
your complex application into reusable parts which you can reuse very easily.
Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Basics

app.component.ts:

When we look at the source code, we can see the number of imports.

These imports are directly injected by CLI automatically. Whenever the ng serve
command rebuilds our project it create JS bundles and automatically import the
index.html file. These script files are actually first code to be executed.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Basics

app.component.ts:

Take a look at app.component.ts file, here you can see the @component decorator.
Inside, there is a selector which assigns a string as a value “app-root”, the same what we
see in index.html.

In our main.ts file, we can see bootstrap array, which lists all the component required for
angular while analyzing index.html.
So when angular starts, our main.ts gets started, and there we bootstrap an angular
application, this app module is passed as an argument.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Basics

How we get the output:

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Basics

Component basics:

That is a lot of information here for app startup, but now we can understand and dive
deeper into how components actually work and how we can create our own components.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Angular8 Architecture:

Angular 8 is a platform and a framework which is used to build client applications in HTML
and TypeScript.

Angular 8 is written in TypeScript. It implements core and optional functionality as a set of

TypeScript libraries that you can import into your apps.

The basic building blocks of an Angular application are NgModules, which provide a
compilation context for components. NgModules collect related code into functional sets;
an Angular app is defined by a set of NgModules.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Angular Architecture:

An app always has at least a root module that enables bootstrapping, and typically has
many more feature modules.

• Components define views, which are sets of screen

elements that Angular can choose among and
modify according to your program logic and data.
• Components use services, which provide specific
functionality not directly related to views. Service
providers can be injected into components as
dependencies, making your code modular,
reusable, and efficient.
Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Angular Components:

In Angular 8, Components and services both are simply classes with decorators that mark
their types and provide metadata which guide Angular to do things.

Each component defines a class that contains

application data and logic, and is associated with an
HTML template that defines a view to be displayed in
a target environment.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Angular Components:

Every angular application is made up of one more Angular Component. It is basically a

plain JavaScript / Typescript class along with a HTML template and an associated name.

The HTML template can access the data from its

corresponding JavaScript / Typescript class. Component’s
HTML template may include other component using its
selector’s value (name).
The Angular Component may have an
optional CSS Styles associated it and the
HTML template may access the CSS Styles as
well.
Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Modules:

Angular 8 NgModules are different from other JavaScript modules. Every Angular 8 app
has a root module known as AppModule. It provides the bootstrap mechanism that
launches the application.
Generally, every Angular 8 app contains many functional modules.

Some important features of Angular 8 Modules:

• Angular 8 NgModules import the functionalities form other NgModules just like other
JavaScript modules.
• NgModules allow their own functionality to be exported and used by other
NgModules. For example, if you want to use the router service in your app, you can
import the Router NgModule.
Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Template, directive and data binding:

In Angular 8, a template is used to combine HTML with Angular Markup and modify HTML
elements before displaying them. Template directives provide program logic, and binding
markup connects your application data and the DOM.

There are two types of data binding:

1. Event Binding: Event binding is used to bind events to your app and respond to user
input in the target environment by updating your application data.
2. Property Binding: Property binding is used to pass data from component class and
facilitates you to interpolate values that are computed from your application data into the
HTML.
Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Services and Dependency Injection:

In Angular 8, developers create a service class for data or logic that isn't associated with a
specific view, and they want to share across components.

Dependency Injection (DI) is used to make your component classes lean and efficient. DI
doesn't fetch data from the server, validate user input, or log directly to the console; it
simply renders such tasks to services.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Architecture

Routing:

In Angular 8, Router is an NgModule which provides a service that facilitates developers

to define a navigation path among the different application states and view hierarchies in
their app.

It works in the same way as a browser's navigation works. i.e.:

• Enter a URL in the address bar and the browser will navigate to that corresponding
page.
• Click the link on a page and the browser will navigate to a new page.
• Click the browser's back or forward buttons and the browser will navigate backward or
forward according to your seen history pages.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

How to create a component.:

Lets say, if we want to share some server information. So we will store this in a new folder
which is a sub folder of app folder, because in Angular CLI project, all app related content
go into this app folder.

• We will call it server, because it will hold our

ServerComponent.(It is a good practice to have your
foldername equal your component name and each
component should have its own folder.)

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

How to create a component.:

So, we have got a new empty file for our new component. Give the below code and create
one templateUrl file server.component.html.

Thus, we have created our first component, but to use it we have to dive into app module.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

Registering the new component

For using the component, we need to change

something about our app module. So what is
app module?

Angular uses components to build web pages

and uses module to bundle different pieces, for
example components of your app into packages.

In the app module, we need to import

ServerComponent and tell angular inside
@NgModule.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

Registering the component:

Import: import simply allows us to import other modules in our app module.

Angular uses components to build web pages and uses module to bundle different pieces,
for example components of your app into packages.

In the app module, we need to import ServerComponent and tell angular inside
@NgModule. Now after registering the components lets use it.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

Use the custom component:

Open app.component.html and the app-server element

here, which is our own selector and our own kind of
element created in server.component.ts.

This is how we have given our html element in

app.component.html. And its done. You can see the output
which is given at server.component.html.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

Create the custom component using CLI

This is how you can create your own component and use them by adding to the app-module.
You can also create the component using CLI.
CLI automatically creates all files for the
component.

Also, CLI automatically imports the newly

created module in app module, does all config

Now lets understand how nesting is done over

components.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

Nesting custom component:

For understanding nesting components, we will make our ‘servers’ component to call ‘server
component’ twice.
Simply we will call <app-server>element inside servers.component.html. And give app-
servers element over app.component.html.

You can see in output, how <app-servers> element is

calling <app-server> element and this is how
components are nested, reused using their selectors.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Create a new component

Nesting custom component:

Apart from the nesting, you can also define the html element in typescript. If you have
limited code, it is always convenient to define the html element in your component.ts.

And you will get the same result. However, remember if

you want more code to be there, use single quote,
where you can wrap the code.
Although, this not significant to use, but still important
to know.
Now lets work with component styles.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Component Styles

Working with Component Styles:

Here, we can see the simplistic code with very limited

styling offered by plain html.

We can give our html. Lets use some bootstrap for

making code look more attractive. You can see better
indentation and look.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Component Styles

Working with Component Styles:

Still, it is just html which is working, lets try some css. Open app.component.css and give
some basic styling to elements. Remember, you can always give css code in
app.component.ts. Inline styles overlap the external style, but you can have as many
stylesheet as you want.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Data Binding

Understand Databinding:

Till now, we have played a lot with the components, now lets do some data binding.
Databinding can be understood as the relation between typescript code, which is your
business logic and the html template. In ts code you may have some results fetched from the
server and you want to display that to the user.

Here, databinding plays the role for communication. This can be done in four ways.
1. String Interpolation: {{ data }}
2. Property Binding: [property]=‘data’
3. Event Binding((event)=“expression”)
4. Combination of both Two way databinding: ([(ngModel)]=“data”)

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 String Interpolation

String Interpolation:

In string interpolation you can show some dynamic data string using double curly quotes.
Example: {{ }}
Lets show some dynamic string.

For the same, lets open server.component.ts

to show the current local date/time. We can
either create method or create any variable
for directly approach. Next call the method,
or direct reference to variable in
server.component.html.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 String Interpolation

String Interpolation:

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Property Binding

Property Binding:

To bind to an element's property, enclose it in square brackets, [], which identifies the
property as a target property. A target property is the DOM property to which you want to
assign a value. To assign a value to a target property for the image element's src property,
type the following code:
<img alt="item" [src]="itemImageUrl">. You can get this url from server and dynamically
provide to view.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Property Binding

String interpolation vs Property Binding:

Often we face the confusion to choose between two. Simply say, when we want to show
some dynamic values, it is advised to use String interpolation, whereas when we want to
change the value of any HTML element, property binding is used.

Now lets understand how to react with the events.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Event Binding

Understand Event Binding:

Lets understand how to bind the event and react. More often than not, you require to show
some data fetched out from server. In most simple form, lets say, we want to show some
dynamic text on a button click.

Open your app.component.html and create button, upon onclick event, you can show the
image and by clicking it again we can hide the image.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Event Binding

Understand Event Binding:

Output:

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Event Binding

Understand Event Binding:

Output:

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Event Binding

Bindable Properties and Events:

How do you know to which Properties or Events of HTML Elements you may bind? You can
basically bind to all Properties and Events - a good idea is to console.log() the element
you're interested in to see which properties and events it offers.

Important: For events, you don't bind to onclick but only to click (=> (click)).

The MDN (Mozilla Developer Network) offers nice lists of all properties and events of the
element you're interested in. Googling for YOUR_ELEMENT properties or YOUR_ELEMENT
events should yield nice results.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Data with Event Binding

Passing data with Event Binding

You may require the event to pass data and do some calculation. Here we will create one
interface which takes the number from user and show the square and root of the same.
First, lets create the interface for the same.
You may require the event to pass data and do some calculation. Here we will create one
interface which takes the number from user and show the square and root of the same.
First, lets create the interface for the same.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Data with Event Binding

Passing data with Event Binding

Lets do some code in your app.component.html for interface and bind the input with
function defined in app.component.ts

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Data with Event Binding

FormsModule is Required for Two-Way-Binding:

Important: For Two-Way-Binding (covered in the next lecture) to work, you need to enable
the ngModel directive. This is done by adding the FormsModule to the imports[] array in
the AppModule.

You then also need to add the import from @angular/forms in the app.module.ts file:
import { FormsModule } from '@angular/forms';

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Two way data binding

Understand two way data binding:

Two-way binding gives components in your application a way to share data. Use two-way
binding to listen for events and update values simultaneously between parent and child
components.

if you change the value of the input box, then it will also update the value of the attached
property in a component class. Two-way data binding performs the following actions:
1. Sets a property of a component class
2. Listens for a DOM element change event
Angular v2+ supports two-way data binding using ngModel directive and also by having
getter and setter methods.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Two way data binding

Understand two way data binding:

In two way data binding, property binding and event binding are combined together.

[(ngModel)] = "[property of your component]"

Lets create an input box , which takes any string and update the label below.

app.component.html

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Directives

Understand two way data binding:

Directives are classes that add additional behavior to elements in your Angular applications.
Use Angular's built-in directives to manage forms, lists, styles, and what users see.

The different types of Angular directives are as follows:

DIRECTIVE TYPES DETAILS

Components Used with a template. This type of directive is most common directive type.

Change the appearance or behavior of an element, component, or another

Attribute directives directive.

Structural directives Change the DOM layout by adding and removing DOM elements.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Directives

Structural Directives:

Structural directives start with a * sign. These directives are used to manipulate and change
the structure of the DOM elements. For example, *ngIf directive, *ngSwitch directive, and
*ngFor directive.

*ngIf Directive: The ngIf allows us to Add/Remove DOM Element.

*ngSwitch Directive: The *ngSwitch allows us to Add/Remove DOM Element. It is similar to
switch statement of C#.
*ngFor Directive: The *ngFor directive is used to repeat a portion of HTML template once
per each item from an iterable list (Collection).

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Directives

Attribute Directives:

Structural directives start with a * sign. These directives are used to manipulate and change
the structure of the DOM elements. For example, *ngIf directive, *ngSwitch directive, and
*ngFor directive.

*ngClass Directive: The ngClass directive is used to add or remove CSS classes to an HTML
element.
ngStyle Directive: The ngStyle directive facilitates you to modify the style of an HTML
element using the expression. You can also use ngStyle directive to dynamically change the
style of your HTML element.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 ngIf Directives

ngIf Directives:

The ngIf Directives is used to add or remove HTML Elements according to the expression.
The expression must return a Boolean value. If the expression is false then the element is
removed, otherwise element is inserted. It is similar to the ng-if directive of AngularJS.

*ngClass Directive: The ngClass directive is used to add or remove CSS classes to an HTML
element.
ngStyle Directive: The ngStyle directive facilitates you to modify the style of an HTML
element using the expression. You can also use ngStyle directive to dynamically change the
style of your HTML element.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 ngIf Directives

Output data using ngIf directives:

In the applications so far, we have not used any built-in directives, here in our application,
we will create a simple condition to show the square and cube only if the input number is
greater than 25. (Refer to slide 36 for understanding)

We have created a Boolean property Here, we have used ngIf directive to check.
“show”, which is false and gets true only It shows the output only if the condition is
when the num>25. true or say, show property is true.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 ngIf with else statement

Using ngIf with Else directive:

You can always extend the ngIf directive using Else statement. Here suppose if we want to
tell user the warning if digit is greater than 25.

It refers to the ng-template if the condition is not true.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Styling element with ngStyle

ngStyle:

Here ngStyle does not remove or show the element, but in fact it changes the element on
which it appears. Here in the example we have used ngIf else and styled it with ngStyle. We
have given an input field to enter age. If age>18, it shows, “you are eligible with green
color”, else “you are under age” in red color.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Changing style with ngClass

ngClass:

As ngStyle connects the html element to the css class, similarly ngClass disconnects the class
from stylesheet and connects with new if the given condition is true.
app.component.html
app.component.css

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 Changing style with ngClass

ngClass output:

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 ngFor

Understand ngFor:

After learning all the built-in directives, now its time to learn ngFor. The *ngFor directive is
used to repeat a portion of HTML template once per each item from an iterable list
(Collection). The ngFor is an Angular structural directive and is similar to ngRepeat in
AngularJS. Some local variables like Index, First, Last, odd and even are exported by *ngFor
directive.

Lets create one dropdown which fills the value dynamically. With this example, you get the
idea for populating the table or list dynamically.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 ngFor

Understand ngFor:

After learning all the built-in directives, now its time to learn ngFor. The *ngFor directive is
used to repeat a portion of HTML template once per each item from an iterable list
(Collection). The ngFor is an Angular structural directive and is similar to ngRepeat in
AngularJS. Some local variables like Index, First, Last, odd and even are exported by *ngFor
directive.

Lets create one dropdown which fills the value dynamically. With this example, you get the
idea for populating the table or list dynamically.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 ngFor

Understand ngFor:

Let look at code, how we can fill values in drop down using *ngFor.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 ngFor

Understand ngFor:

You can also add new items in dropdown or any list.

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .
 THANK YOU

Copyright © 2009 iPrimed, all rights reserved. This presentation contains information and data that is confidential and proprietary to iPRIMED .