Angular 7 1 100

ANGULAR 7
P a g e 7 | 454
Angular 7
Angular 7 Tutorial
TypeScript 2
What is TypeScript
• TypeScript is a programming language, which is developed based on JavaScript.
• TypeScript is a superset of JavaScript, which adds data types, classes, interfaces and other features.
• TypeScript = JavaScript + Data Types + Classes + Interfaces + Misc. Concepts (Arrow Functions +
Multiline Strings + String Interpolation + Destructuring + Modules etc.)
• TypeScript is built on the top of JavaScript. That means all the code of JavaScrpt works as-it-is in
TypeScript, but in TypeScript, we can additionally use data types, classes, interfaces etc., concepts.
• TypeScript is developed by Microsoft Corporation in 2012.
Features of TypeScript
• TypeScript is a general purpose programming language.
• TypeScript is built in the top of JavaScript. It supports all the concepts of JavaScript.
• TypeScript doesn't stick to client side programming / server side programming. TypeScript can be
used in client side program development, using Angular framework. It can be used in server side
program development, using NodeJS platform.
• TypeScript requires to be used in modern code editors / IDE's, such as Visual Studio Code, Atom,
Sublime Text, Web Storm, Eclipse etc.
• Browser doesn’t support TypeScript directly. TypeScript code can’t be executed directly by the browser.
So TypeScript code should be converted into JavaScript code, and we have to import JavaScript
language file into the web page. Browser executes JavaScript. We use "TypeScript Compiler" (tsc) to
compile / transpile "filename.ts (TypeScript file)" to "filename.js (JavaScript file)". We won't load
TypeScript file into the browser; We will load & execute JavaScript file into the browser.
D. Harsha Vardhan (UI Expert) P a g e 8 | 454

Angular 7
Versions of TypeScript
o TypeScript 0.8 : 2012 (first version)
o TypeScript 0.9 : 2013
Advantages of TypeScript
1. Static Typing and Type Safety
o Static Typing: Whenever we can fix a data type for the variable while declaration of variable, and we
can’t change its data type throughout the program, then it is said to be “static typing”. Whenever we
can’t fix a data type for the variable while declaration, and the data type will be automatically taken by
the runtime engine automatically at the time of program execution, and we can assign any type of
value into the variable, then it is said to be “dynamic typing”. C, C++, Java, C#.NET are examples of
“static typing”. “JavaScript”, “Python” are examples of “dynamic typing”. TypeScript supports "Optional
Static Typing". That means you can use both “dynamic typing” and “static typing” in TypeScript.
o Type Safety: If we specify data type while declaring the variable and when we assign wrong type
of value into the variable, the compiler shows errors.
2. Identification of Errors
o Typing mistakes and syntax errors are displayed as errors in the compilation time itself (rather
than at runtime).
3. Classes and Interfaces
o TypeScript supports classes and interfaces; so it providers rich programming experience much
like other languages such as Java, C#.NET etc.
4. Intellisense
o Automatic suggestions will be displayed while writing the code. For example, when we type “c” in the
IDE, the list of matching names that start with “c” will be automatically displayed. This is available
only in supporting code editors / IDE’s such as Visual Studio Code, WebStrom, Sublime Text etc.
1) Installing NodeJS
2) Installing TypeScript
3) Create Application Folder
4) Installing the Code Editor: Visual Studio Code
5) Create TypeScript Program
6) Compile the TypeScript Program
7) Execute the TypeScript Program

Angular 7
• Go to “https://nodejs.org”.
• Click on “10.7.0 Current”. Note: The version number can be very. Choose the latest version.
• You will download a file called “node-v10.7.0-x64.msi”.

Angular 7
• Go to Downloads folder and double click on “node-v10.7.0-x64.msi”.
• Click on “Next”.
• Check the checkbox “I accept the terms in the License Agreement” and click on “Next”.

Angular 7

Angular 7
• Click on “Install”.
• Click on “Yes”.
• Installation is in progress now.

Angular 7
• After installation is completed, click on “Finish”. Now NodeJS installation is finished.
• Open “Command Prompt”.
• Type npm install typescript -g in the Command prompt and press Enter.

Angular 7
• After pressing Enter:
• Now TypeScript successfully installed.

• Go to “Computer” (or) “This PC”.
• Go to “c:\”.
• Right click on the empty area and click on “New Folder”.

Angular 7

Angular 7
• Type the folder name as “angular” and press Enter.
• The “c:\angular” folder is ready now.
4) Installing Visual Studio Code

• “Visual Studio Code” is the recommended editor for typescript and angular.
• Visual Studio Code is easy, free, modern, customizable, open source, cross platform editor for
editing so many languages such as Html, Css, JavaScript, TypeScript, Solidity, C#, Python etc.

Angular 7
• Go to https://code.visualstudio.com
• Click on “Download for Windows”.

• Note: The version number may be different at your practice time.
• Go to “Downloads” folder; you can find “VSCodeSetup-x64-1.25.1.exe” file.
• Double click on “VSCodeSetup-x64-1.25.1.exe” file.


Angular 7
• Click on “I accept the agreement”.


Angular 7

Angular 7
• Check the checkbox “Add Open with Code action to Windows Explorer file context menu”.
• Check the checkbox “Add Open with Code action to Windows Explorer directory context menu”.

Angular 7
• Installation is going on….
• Click on “Finish”.
5) Create TypeScript Program

• Open “Visual Studio Code”, by clicking on “Start” – “Visual Studio Code” – "Visual Studio Code".
• Visual Studio Code opened.

Angular 7
• Go to “File” – “New File”.

• Type the program as follows:
• Go to “File” menu – “Save” (or) Press Ctrl+S.

Angular 7
• Select “c:\angular” folder and enter the filename as “first.ts”.

• Click on “Save”.
• Now the typescript file (c:\angular\first.ts) is ready.
6) Compile the TypeScript Program

• Open Command Prompt and enter the following
commands: cd c:\angular
tsc first.ts

Angular 7
• Now the “typescript program” has been compiled into “javascript program”; So “first.js” file has been
generated in “c:\angular” folder.
7) Execute the TypeScript Program

• Enter the following commands in the same Command Prompt
window: node first.js
Output:
Hello
• Note: The "node" command (Provided by Node.js) executes the javascript file and executes its
output in the Command Prompt itself.

Angular 7
Variables
• Variable is a named memory location in RAM, to store a value at run time.
• Syntax:var variable : datatype = value;
• Example:var a : number = 100;
• TypeScript supports “optional static typing”. That means it is optional to specify datatype for the
variable in TypeScript.
o Static Typing: If you specify the data type for the variable, it is not possible assign other data type
of value into the variable; if you do so, “tsc” compiler will generate coding-time and compile-time
errors; but the code will be compiled and executed also, even though it is having errors.
o Dynamic Typing: If you don’t specify the data type for the variable, we can assign any type
of value into the variable.
• In TypeScript, we have “optional static typing”. That means it is optional to specify datatype for the
variable in TypeScript.
Data Types
• “Data type” specifies what type of value that can be stored in a variable.
• List of TypeScript Data Types:
1. number: All types of numbers (integer / floating-point numbers). Ex: 10, 10.3498
2. string: Collection of characters in double quotes or single quotes. Ex: “hello”
3. boolean: true or false
4. any: Any type of value
Variables and Data Types - Example
c:\angular\datatypes.ts
Compilation and Execution

• Open Command
Prompt cd c:\angular
tsc datatypes.ts
node datatypes.js

Angular 7
Object
What is Object
• Object is the primary concept in OOP (Object Oriented Programming).
• “Object” represents a physical item, that represents a person or a thing.
• Object is a collection of properties (details) and methods (manipulations).
• For example, a student is an "object".
• We can create any no. of objects inside the program.
What is Property
• Properties are the deails about the object.
• Properties are used to store a value.
• For example, studentname="Scott" is a property in the "student object".
• Properties are stored inside the object.
• The value of property can be changed any no. of times.
What is Method
• Methods are the operations / tasks of the object, which manipulates / calculates the data and do
some process.
• Method is a function in the object. In other words, a function which is stored inside the object is
called as "Method".
• Methods are stored inside the object.

Angular 7
Creating Object
• Object can be created by using "Object Literal Pattern" in TypeScript.
• "Object literal" is a collection of properties and methods, that are enclosed within curly braces { }.
• Syntax to create Object:{ property: value, …, method: function( ) { code here } }
Reference Variable
• The "reference variable" is a variable, that can store the reference of an object.
• We can access all the properties and methods of the object, by using the "reference variable".
• Syntax to create Object and store its reference in the "reference variable":
var referenceVariable = { property: value, …, method: function() { code here } };
Objects - Example
c:\angular\objects.ts

• Open Command
tsc objects.ts
node objects.js

Angular 7
Class
What is Class
• “Class” represents a model of the object, which defines list of properties and methods of the object.
• Ex: “Student” class represents structure (list of properties and methods) of every student object.
• We can create any no. of objects based on a class, using "new" keyword.
• All the objects of a class, shares same set of properties & methods of the class.
• We can store the reference of the object in "reference variable"; using which you can access the object.
class classname
{
properties
methods
}

Angular 7
Steps for working with classes and objects

• Create a Class:
class classname
{
property: datatype = value;
…
methodname( parameter1: datatype, parameter2: datatype, … ) : returntype
{
code here
}
…
}
• Create an Object & Store its address in Reference Variable
var referencevariablename = new classname( );
• Access Properties and Methods using Reference
Variable referencevariablename.property
referencevariablename.method( );
Classes - Example
c:\angular\classes.ts

Angular 7

• Open Command
tsc classes.ts
node classes.js
Constructor
• Constructor is a special function which is a part of the class.
• Constructor will be called automatically when we create a new object for the class. If you create multiple
objects for the same class, the constructor will be called each time when you create new object.

Angular 7
• Constructor is used to initialize properties of the class.

• Constructor’s name should be “constructor”.
• Constructor can receive arguments; but can’t return any value.
• In TypeScript, we can't define multiple constructors.
Syntax of Constructor
Constructor - Example
c:\angular\constructor.ts

Angular 7

• Open Command
tsc constructor.ts
node constructor.js
Inheritance
• Inheritance is a concept of extending the parent class, by creating the child class. The child class extends
parent class. That means all the members of parent class will be inherited (derived) into the child class.

Angular 7
• When you create an object for the child class, it includes all the members (properties and methods)
of both child class and parent class. When you create an object for parent class, it includes all the
members (properties and methods) of parent class only.
• For example, the “Student” class extends “Person class”. The “Car” class extends “Vehicle” class.
• When parent class has a constructor, the child class’s constructor must call the parent class’s
constructor explicitly.
• The “extends” keyword is used to create inheritance.
• The “super” keyword represents current parent class. It can be used to call the constructor or
method of parent class.
Types of Inheritance
• Single Inheritance: One parent class with one child class.
• Multiple Inheritance: Multiple parent classes with one child class.
• Hierarchical Inheritance: One parent class with multiple child classes.
• Multi-Level Inheritance: One parent class with one child class and the child class has another child class.
• Hybrid Inheritance: One parent class with one child class.
Syntax of Inheritance
• Create parent class:
class parentclass
{
parent class’s members
}
• Create child class:

class childclass extends parentclass
{
child class’s members
}
• Create object for parent class:

var referencevariable = new parentclass( );
referencevariable.parentclassmember
• Create object for child class:
var referencevariable = new childclass( );

referencevariable.childclassmember
referencevariable.parentclassmember

Angular 7
Inheritance - Example
c:\angular\inheritance.ts

Angular 7

• Open Command
tsc inheritance.ts
node inheritance.js
Access Modifiers
• Access Modifiers specify where the member of a class can be accessible.
• That means it specifies whether the member of a class is accessible outside the class or not.
• These are used to implement "security" in OOP.
• For each member (property / method), we can specify the access modifier separately.
• TypeScript compiler and Visual Studio Code Edtitor shows errors, if a developer try to access the
member, which is not accessible.
• "public" is the access modifier for all the members (property / method) in TypeScript class.
• TypeScript supports three access modifiers:
1. public (default)
2. private
3. protected

Angular 7
1. public (default):
o The public members are accessible anywhere in the program (in the same class and outside
the class also).
2. private:
o The private members are accessible within the same class only; If you try to access them
outside the class, you will get compile-time error.
3. protected:
o The protected members are accessible within the same class and also in the corresponding child classes;
If you try to access them outside the same class or child class, you will get compile-time error.
Syntax of creating a member with access modifier:

• Property:
class classname
{
accessmodifier property: datatype;
}
• Method:
class classname
{
accessmodifier methodname( arguments) : returntype
{
}
}
Access Modifiers - Example
c:\angular\accessmodifiers.ts

Angular 7

• Open Command
tsc accessmodifiers.ts
node accessmodifiers.js

Angular 7
Interfaces
• Interface is the model of a class, which describes the list of properties and methods of a class.
• Interfaces doesn’t contain actual code; contains only list of properties and methods.
• Interfaces doesn’t contain method implementation (method definition); it contains method declaration
only, which defines method access modifier, method name, method arguments and method return type.
• The child class that implements the interface must implement all the methods of the interface; if not,
compile-time error will be shown at child class. The method name, parameters, return type and
access modifier must be same in between "interface method (method at the interface)" and "class
method (method at the class)".
• Interfaces act as a mediator between two or more developers; one developer implements the
interface, other developer creates reference variable for the interface and invokes methods; so
interface is common among them.
• The child class can implement the interface with “implements” keyword.
• All the methods of interface is by default, "public".
• One interface can be implemented by multiple classes; One class can implement multiple interfaces.
• We can develop "multiple inheritance" by implementing multiple interfaces at-a-time in the same class.
Steps for development of Interfaces

• Create an interface:
interface interfacename
{
property: datatype;

Angular 7
…
method( arguments ): returntype;
…
}
• Create a child class for the interface and implement

it: class classname implements interfacename
{
property: datatype;
method( arguments ) : returntype

{
code here
}
}
Interfaces - Example
c:\angular\interfaces.ts

• Open Command
tsc interfaces.ts
node interfaces.js

Angular 7
Enumerations
• Enumeration is a collection of constants.
• Enumeration acts as a data type.
• We can use "enumeration" as a data type for the "enumeration variable" or "enumeration property".
• The enumeration variable or enumeration property can store any one of the constants of the same
enumeration.
• Every constant of enumeration is represented with a number (starts from 0).
Steps for development of enumeration

• Create an enumeration:
enum enumerationName
{
constant1, constant2, …
}
• Create a property of enumeration

type: class classname
{
property: enumerationName;
}
• Create a variable of enumeration type:

variableName: enumerationName;
• Assign the value into enumeration variable or enumeration

property: enumerationVariable = enumerationName.constant;
this.enumerationProperty = enumerationName.constant;

Angular 7
Enumerations - Example
c:\angular\enumerations.ts

• Open Command
tsc enumerations.ts
node enumerations.js

Angular 7
Modules
• In large scale applications, it is recommended to write each class in a separate file.
• To access the class of one file in other file, we need the concept of "Modules".
• Module is a file (typescript file), which can export one or more classes (or interfaces, enumerations
etc.) to other files; The other files can import classes (or interfaces, enumerations etc.), that are
exported by the specific file. We can't import the classes (or others) that are not exported.
• We can export the class (or others), by using "export" keyword in the source file.
• We can import the class (or others), by using "import" keyword in the destination file.
• To represent:
1. current folder, we use "./".
2. sub folder in current folder, we use "./subfolder".
3. parent folder, we use "../".
Steps for development of modules

• Export a class in file1.ts
export class className1
{
…
}
• Import class in file2.ts:

import { className1 } from "./file1.ts";
class className2
{
}
Modules - Example
c:\angular\Student.ts
c:\angular\StudentsList.ts

Angular 7

• Open Command
tsc Student.ts
tsc StudentsList.ts
node StudentsList.js

Angular 7

Angular 7
Angular 7
What is Angular?
• Angular is a client side framework, which is used to create web applications. The framework
provides skeleton of the project and specifies clear guidelines, where to write which type of code.
• Angular can be used in combination with any server side platform such as Java, NodeJS, Asp.Net,
PHP, Python etc.
• Angular is developed using "TypeScript" language, which is a superset of JavaScript language.
• Angular is the most-used client side framework.
• Angular was developed by Google.
• Angular is free-to-use (commercially too).
• Angular is open-source. That means the source code of angular is available online for free of cost.
• Angular is cross-platform. That means it works in all the operating systems.
• Angular is cross-browser compatible. That means it works in all the browsers, except less than IE 9
(which is completely out-dated).
• Angular is mainly used to create "data bindings". That means, we establish relation between a variable
and html element; When the value of the variable is changed, the same will be automatically effected in
the corresponding html element; and vice versa. So that the developer need not write any code for DOM
manipulations (updating values of html tags, based on user requirements. for example, updating the list
of categories when a new category added by the user). Thus the developer can fully concentrate on the
application logic, instead of writing huge code for DOM manipulations. So we can achieve clean
separation between "application logic" and "DOM manipulations".
• Angular mainly works based on "Components". The component is a class, which reprensets a
specific section (part) of the web page.
Goals of Angular
• Separation of DOM manipulation from application logic.
• Separation of HTML logic from application logic.
• Make SPA (Single Page Appliation) development easier. SPA provides client-side navigation system; but
can communicate with server only through AJAX; the web page never gets refreshed fully. Ex: Gmail.
• Separation of business logic from application logic.
• Enable Unit testing. The components can be unit tested individually.

Angular 7
Versions of Angular
• Angular 2 : Sep 14th 2016
• Angular 4: Mar 23rd 2017 [Angular 3.0 was skipped due to misalignment of router package 3.3.0]
• Angular 5 : Nov 1st 2017
• Angular 6 : May 4th 2018
Angular (vs) AngularJS

• “Angular 2” is not an extension to “Angular 1”; it is a completely “rebuilt” or “rewrite”. “Angular 2” is
rewrite from the same team that built “AngularJS 1”.
• “Angular 4”, “Angular 5” and “Angular 6” are mostly similar to “Angular 2”, except some internal
changes for stability and performance.
• “Angular 2+” means “Angular 2, Angular 4 and Angular 5”. Note: “Angular 3” is not released, to
avoid the confusion of “router” package, which is already released with “3.3.0” version.
Sl. AngularJS Angular

No
1 “AngularJS” has performance drawbacks “Angular” is faster in performance because it
because, the “digest loop” checks and updates updates a single property that has been really
all properties when a field or property has been modified.
modified.
No digest loop and no need of any repetition.
The digest loop may repeat up to 10 times; due
to a watcher of one property can update other
property.
2 “AngularJS” is based on “JavaScript”, which is “Angular” is based on “TypeScript”, which is

“prototype-based OOP language”. “class-based OOP language”.
3 “AngularJS” is based on “MVC architecture”. The “Angular” is based on “Components”.

code will be divided into three major parts called Component is a class that contains stores
“Model”, “View” and “Controller”. Model is an data and also manipulates the data. View is a
object that stores data. View is a html file that html file that contains prensentation logic to
contains presentation logic to display data. display data.
Controller is a function that manipulates data.
4 “AngularJS” is mainly used for development of “Angular” is also mainly used for
“Single Page Applications”. development of “Single Page Applications”.
5 Apart from data bindings, Angular 1 provides Apart from data bindings, Angular 2 provides
many additional features such as validations, many additional features such as validations,
routing, animations, services, filters, providers, routing, animations, services, pipes, AJAX etc.
factories, configuration, AJAX etc.
6 Supports “Scopes” (Models) to store data. Doesn’t supports Scopes; but supports
Components alternatively.
7 Supports only one expression syntax {{ }}. Supports multiple expression syntaxes such
as {{ }}, [], ().

Angular 7
8 Doesn’t provide CLI (Command Line Interface), Provides CLI (Command Line Interface), to
to generate components and services easily from generate components and services easily
the command prompt commands. from the command prompt commands.
Angular (vs) jQuery

• jQuery is a “library”, which provides a set of pre-defined functions to perform DOM manipulations directly.
• Angular is a framework, which provides the complete application structure and set of concepts to
organize the client side code completely, which enables the developers to work with “Data bindings”
to avoid DOM manipulations directly.
Angular (vs) React

• React just acts as a "view layer", which provides necessary concepts to create data bindings in the view.
• Angular is a "complete client side framework", which provides the complete application structure
and set of concepts to organize the client side code completely, which enables the developers to
work with “Data bindings” to avoid DOM manipulations directly.
• Angular provides so many concepts such as services, directives, dependency injection, routing etc.,
which are not supported by React.
Features of Angular
• TypeScript based: Pre-defined code and User-defined code is developed based on TypeScript language.
• Faster performance: “Angular 2+” executes faster than “AngularJS 1”.

• Modular: Angular is divided into multiple small parts called “packages”. For example, "core", "common",
"forms", "router" etc. The developer can use any of those modules based on the requirement.
Browser Compatibility of Angular 2+

• Angular 2+ supports the following browsers:
Browser Supported Version

Google Chrome Any Version
Mozilla Firefox Any Version
MS Internet Explorer 9+
MS Edge 13+
Safari 7+
Android Browser 4.1+

Angular 7
Building Blocks of Angular

• Angular is composed with the following “building blocks”:
1. Component : Application state + Application logic
2. Metadata : Details about the component / module etc.
3. Template : Design logic (HTML)
4. Data Binding : Connection between HTML element and Component property
5. Module : Group of components, directives and pipes.
6. Service : Re-usable code / business logic.
7. Dependency Injection : Injecting (loading) Service objects into Components.
8. Directive : Manipulating DOM elements
9. Pipe : Transforming values before displaying
Angular Architecture
• Angular 2+ framework is built based on this architecture.
Types of compilation in Angular

• Angular framework supports two types of compilation.
Just-In-Time Compilation
- Templates (.html files) and angular compiler files will be loaded into the browser and then the
templates will be compiled automatically at the time of execution, when the component is invoked.

Angular 7
- The template will be compiled only for the first time, when it invoked, after loading the
application files into the browser.
- Disadvantage: Performance is slower, because every time when you run the application, the
templates will be loaded into browser and compiled in the browser; it takes some time to compile.
- Advantage: The developer need not compile it manually at command prompt, for each
modification of code.
- This is recommended during the development.
- Bootstrapping (loading app module into the browser) is done by “@angular/platform-
browser-dynamic” package.
Ahead-Of-Time Compilation
- The developer gives “ngc” command in the Command Prompt; Then the “ngc” compiler
compiles the templates into javascript code; the compiled javascript code will be loaded into
the browser and it directly executes. There is no need of loading “templates (.html files)” and
“angular compiler scripts” into the browser.
- Advantage: Performance is faster, because the templates are already compiled.
- Disadvantage: The developer need to compile it manually at command prompt, for each
modification of code.
- This is recommended in the production server only.
- Bootstrapping is done by “@angular/platform-browser” package.
4) Creating Application Folder
5) Install “@angular/cli” package
6) Creating New Angular App
7) Open the App in Visual Studio Code
8) Edit code in app.component.html
9) Compile the application
10) Run the application
• Angular 2+ framework is available as a collection of packages; those packages are available in
“npm” (NodeJS Package Manager). To use “npm”, NodeJS must be installed.
• If you have already installed nodejs in your system, you can skip this step and go to step 2.
• If you have not installed nodejs in your system, you continue this step.
• Go to “https://nodejs.org”.

Angular 7
• Click on “9.4.0 Current”. Note: The version number can be very. Choose the latest version.
• You will download a file called “node-v9.4.0-x64.msi”.
• Go to Downloads folder and double click on “node-v9.4.0-x64.msi”.

Angular 7
• Check the checkbox “I accept the terms in the License Agreement” and click on “Next”.

Angular 7

Angular 7
• Installation is in progress now.

Angular 7
• After installation is completed, click on “Finish”. Now NodeJS installation is finished.

• Note: Automatically it adds the nodejs installation directory in the “Path” at environment variables of
your computer.
• Open “Command Prompt”.
• Type npm install typescript -g in the Command prompt and press Enter.
• After pressing Enter:
• Now TypeScript successfully installed.

Angular 7

• If you have installed Visual Studio Code already, you can skip this step and go to step 4.
• If you don’t have installed Visual Studio Code, continue this step.
• “Visual Studio Code” is the recommended editor for typescript and angular.
• Go to https://code.visualstudio.com
• Click on “Download for Windows”.

• Note: The version number may be different at your practice time.
• Go to “Downloads” folder; you can find “VSCodeSetup-x64-1.19.2.exe” file.

Angular 7
• Double click on “VSCodeSetup-x64-1.19.2.exe” file.


Angular 7
• Click on “I accept the agreement”.


Angular 7
• Check the checkbox “Add Open with Code action to Windows Explorer file context menu”.
• Check the checkbox “Add Open with Code action to Windows Explorer directory context menu”.

Angular 7
• Installation is going on….

Angular 7
• Click on “Finish”.

• If you have already created “c:\angular” folder, you can skip this step and go to step 5.
• If you don’t have created “c:\angular” folder, continue this step.
• Go to “Computer” (or) “This PC”.
• Go to “c:\”.

Angular 7
• Right click on the empty area and click on “New Folder”.

Angular 7
• Type the folder name as “angular” and press Enter.
• The “c:\angular” folder is ready now.
5) Install @angular/cli package

• Open “Command Prompt” and run the following
command: cd c:\angular
npm install @angular/cli -g

Angular 7
• The “@angular/cli” package provides a set of commands to create new angular applications and
also to create items in the project such as modules, components, pipes, services, directives etc.
• Installing “@angular/cli” package globally will download the package files from internet into “C:\
Users\Harsha\AppData\Roaming\npm\node_modules\@angular\cli” folder, which can be used from
any folder in the entire system.
6) Creating New Angular Application

command: cd c:\angular
ng new app1
• After creating application:
• Now new application at “c:\angular\app1” folder is created.

Angular 7
7) Open the Application in Visual Studio Code

• Go to “Start” > “Visual Studio Code”.
• Click on “File” – “Open Folder”.

Angular 7
• Select the folder “c:\angular\app1”.

Angular 7
• Click on “Select Folder”.
8) app.component.html
• Go to “app1\src\app1\app.component.ts” in “Explorer” window in Visual Studio Code.

Angular 7
9) Compile the application

command: cd c:\angular\app1\
ng serve
• Application compiled successfully:

Angular 7
• Now new application at “c:\angular\app1” folder is created.
10) Run the application

• Open the browser and enter the following
URL: http://localhost:4200
• Output:
• c:\angular (folder) o
app1 (folder)
▪ package.json
▪ node_modules (folder)
▪ package-lock.json
▪ tsconfig.json
▪ tslint.json
▪ protractor.conf.js
▪ karma.conf.js
▪ angular.json

Angular 7
▪ src (folder)
• polyfills.ts
• favicon.ico
• index.html
• styles.css
• main.ts
• environments (folder)
• assets (folder)
• app (folders)
o app.module.ts
o app.component.ts o
app.component.html o
app.component.css
o app.component.spec.ts
1) package.json
• The “package.json” file represents the configuration settings / meta data of the application.
• It specifies package name, version, dependencies etc.
• It is a fixed filename.
• It is must, without which the application is not accepted.
• It is a JSON files, which means it contains key/value pairs. Every key and value must be within double quotes
(“ “) / single quotes (‘ ‘).
Properties of “package.json”
1 name Represents name of the application.
It can be maximum of 214 characters.
Non-URL friendly characters such as /, :, @ etc., are not allowed.
Ex: “name”: “app1”
2 version Represents version of the application. Ex: 1.0.0
It should have 3 numbers major version, minor version, subminor version.
Ex: “version”: “1.0.0”
4 license Represents license of the application. Ex: MIT, ISC
MIT:
MIT stands for “Massachusetts Institute of Technology”.

Angular 7
MIT license allows to create private applications that can be used

either privately within the organization and also can be shared
with other known organizations.
Ex: “license”: “MIT”
ISC:
ISC stands for “Internet Systems Consortium”.
ISC license allows to create public applications that can be used

anywhere.
Ex: “license”: “ISC”
5 scripts Represents a set of commands that can run on the Command Prompt to
run, test the applications using commands.
Ex: “scripts”:
“start”: “ng serve”
4 private Represents whether the application should be used privately within the
same organization or not.
If it is true, it can be used only within the same organization. Outside usage
is not permitted.
Ex: “private”: true
5 dependenciesRepresents the list of packages that are to be installed to run the

application. These packages will be installed in both developer
machine and production server.
Ex: “dependencies”:
“@angular/core”: “^5.2.0”
6 devDependencies Represents the list of packages that are to be installed to develop

the application. These packages will be installed only in the
developer machine; not in the production server.
Ex: “devDependencies”:

Angular 7
“@angular/cli”: “~1.7.4”
package.json

Angular 7

Angular 7
Packages of Angular 2+
• The angular 2+ framework is available as a collection of packages.
• Each feature of the framework is represented as a package. For example, routing is available as a
package called “@angular/router”.
• We have to install (download) those packages in order to develop angular application.
• The packages of angular 2+ are divided into two types:
I. Angular Packages:
▪ These packages are part of angular 2+ framework.
II. Non-Angular Packages:
▪ These packages are not part of angular 2+ framework; provided by third party
companies, but needed / useful in angular applications.
I. Angular Packages:
1 @angular/core
This package provides classes and interfaces that are related to decorators, component
life cycle, dependency injection etc., that are needed in every angular 2+ application.
This is the mandatory package.
Examples of decorators provided by @angular/core package: @Component,

@NgModule, @Input, @Injectable, @Inject etc.
Examples of component life cycle interfaces provided by @angular/core package:
OnInit, DoCheck, AfterViewChecked, OnDestroy etc.
This package contains a module called “ApplicationModule”, which contains the set
of pre-defined scripts that are needed to run the angular application.
2 @angular/common
This package provides common directives and pipes that are needed in most of the
angular applications.
Ex of directives provided by @angular/common package: ngIf, ngFor, ngSwitch, ngClass etc.
Ex of pipes provided by @angular/common package: uppercase, lowercase, date,

currency etc.
This package contains a module called “CommonModule”, which contains the

above specified directives and pipes.

Angular 7
3 @angular/platform-browser
This package imports “ApplicationModule” from “@angular/core”, “CommonModule”
from “@angular/common” and re-exports them as “BrowserModule”. Additionally, it
provides some runtime services (such as “error handling, history handling” etc.), that
are needed while running the application in the browser.
4 @angular/compiler
This package is used to compile the “template” into a “javascript code”. We never
invoke the angular compiler directly; we will call it indirectly through either
“@angular/platform-browser-dynamic” or “@angular/platform-browser”.
5 @angular/platform-browser-dynamic
An angular application can have any no. of modules. This package is used to
bootstrap (start) executing a module, which execution should be started automatically
at application startup. This is the mandatory package.
6 @angular/forms
This package is used for creating “two way data bindings” and “validations” in angular
2+ applications. This package works based on another package called “zone.js”.
This package has two modules: FormsModule and
ReactiveFormsModule. This is the optional package.
7 @angular/router
This package is used to creating “routing” (page navigation) in angular 2+ applications.
This package has one module:
RouterModule This is the optional package.
8 @angular/http
This package is used to send ajax requests to server and get ajax response from
server. This package works based on another package called “rxjs”.
This package has one module:
HttpClientModule This is the optional package.

Angular 7
9 @angular/animations
This package is used to create animations in angular 2+
applications. This package has one module: AnimationsModule
This is the optional package.
10 @angular/material
Used to use “angular material design” in angular applications.
This package has several modules: MatButtonMoudle, MatCheckboxModule,

MatMenuModule etc.
11 @angular/cdk
Based on this package only, “angular material design” components are developed.
So this package must be used while using “@angular/material” package.
12 @angular/cli
This package provides a set of commands to create new angular application and
its code items such as components, pipes, directives, services etc.
This package must be installed globally, with “-g” option.
II. Non-Angular Packages

1 typescript
This package provides typescript compiler, which is used to compile
“typescript files (.ts)” into “javascript files (.js)”.
This package must be installed globally, with “-g” option.
2 systemjs
This package is used to load both angular framework-related and
application program-related “.js” files into the browser.

Angular 7
3 core-js
This package contains polyfills, which are needed to run angular 5
application in Internet Explorer 9+.
4 rxjs
This package “rxjs” (Reactive Extensions for JavaScript) provides
necessary code for making ajax calls to server.
5 zone.js
This package identifies the events in the browser and informs the same to
angular framework; so that it can perform “change detection”.
6 jasmine
This package is used to write test cases for unit testing of
components. This is the mandatory package.
7 jasmine
This package is used to execute test cases within one
browser. This is the mandatory package.
8 karma
This package is used to execute test cases on different
browsers. This is the mandatory package.
9 tslint
This package is used to check whether the typescript files are following set of
rules or not. For example, you can check the maximum length of the line in
the code. This is the mandatory package.
2) tsconfig.json
• Every compiler has some configuration settings.
• This file is used to set configuration settings of the “tsc” (Type Script Compiler).
• The “tsc” compiler automatically reads the “tsconfig.json” file; and then only it compiles the “.ts” files
into “.js” file.

Angular 7
• This is a fixed filename.
“tsconfig.json” – Configuration Settings

1 target
Represents javascript version, into which the “.ts” file have to be compiled. Ex: “es5”.
Recommended: “es5”.
Options: es3 | es5 | es6
2 sourceMap
true | false
true: Generates “source map” files. The source map file contains mapping between
line numbers of “.ts” file to “.js” file. Based on the source map files, you can debug the
typescript code. It is recommended to generate source map files during development.
false: “Source map” files will not be generated. So then we can debug “javascript
code” only. Source map files are not required in production.
3 experimentalDecorators
true | false
true: It supports decorators (such as @Component, @NgModule, @Injectable etc.)
false: It doesn’t support decorators.
4 emitDecoratorsMetaData
true | false
true: It supports decorators with meta data.
false: It doesn’t support decorators with meta data.
5 lib
It represents the list of library files to be included while compilation of the typescript
files. The angular 2+ application requires the following libraries:
[ “es2017”, “dom” ]
Note: These libraries will be installed automatically, along with “typescript” package.

Angular 7
es2017:
This library contains essential data type such as Number, String, Boolean, Object,
Function, RegExp etc.
dom:
This library contains essential classes such as “HTMLElement”, “Document”, “Window” etc.
6 outDir
Specifies the directory (folder) where the compiled files needs to be stored.
3) tslint.json
• This file contains configuration settings for “tslint” tool, which is used to verify whether the typescript
files are following a set of coding standards or not.
• For example, we can check the maximum length of the line, indentation etc.

Angular 7

Angular 7

Angular 7
4) protractor.conf.js
• This file contains configuration settings for “protractor” tool, which is used to perform unit testing of
components.

Angular 7
• The “protractor” tool is used to execute the test cases that are defined using “jasmine”.
5) karma.conf.js
• This file contains configuration settings for “karma” tool, which is used to execute unit test cases on
multiple browsers.

Angular 7
6) .angular-cli.json
• This file contains configuration settings for “@angular/cli” tool, which is used create, compile and
run the application.
• It contains settings such as home page (index.html), startup file name (main.ts), css file name
(styles.css) etc.

Angular 7

Angular 7
7) polyfills.ts
• This file contains configuration settings for importing (loading) polyfills which are needed to run
angular applications on old browsers such as Internet Explorer.

Angular 7
8) src/styles.css
• This file contains CSS styles that are applicable for entire application.

Angular 7
9) src/index.html
• This file is the home page (startup page) for the entire application.
• The content of the entire application appears in the samee html file only.
• This file invokes the “AppComponent” using <app-root></app-root> tag.
10) src/main.ts
• This is the first typescript file that executes in the angular application.
• It enables the “Production mode” and specifies startup module:
Application Modes in Angular

1. Development Mode:
• Change Detection occurs twice. Raises error if any difference detected between first attempt and
second attempt. This is to identity whether any side effects in change detection.

Angular 7
• It is the default mode.

2. Production Mode
• Change Detection occurs only once..
• Syntax: enableProdMode();
Startup Module
• Angular application can has any no. of modules.
• The “startup module” is a module, which needs to be executed first in the angular application.
• By default startup module name is “AppModule”.
• Loading the startup module is also called as “Bootstrapping the module”.
• Syntax: platformBrowserDynamic().bootstrapModule(Modulename);
11) src/app/app.module.ts
• This file contains definition of “AppModule”.
• Angular application can has any no. of modules. It should contain atleast one module, that is called as
“AppModule”.
• This file imports “AppComponent” from “app.component.ts” file and bootstraps the same in “AppModule”.
12) src/app/app.component.ts
• This file contains definition of “AppComponent”.
• Angular application can has any no. of components. It should contain atleast one component, that is
called as “AppComponent”.

Angular 7
• This file specifies path of template file “app.component.html” and css file “app.component.css” file.
13) src/app/app.component.html
• This file contains actual content (html code) of the component.
• Every component should have a template.
• This template content will be rendered into <app-root></app-root> tag at index.html.
14) src/app/app.component.css
• This file contains css styles of “AppComponent”.
• One component can have only one css file.
• By default, this file is empty.
15) src/app/app.component.spec.ts
• This file contains test cases for “AppCompoent”.
• The test case files should have “spec.ts” file extension.

Angular 7
What is Component?
• The component class represents certain section of the web page. For example, “login form” is
represented as a “Login Component”.
• The component class includes “properties” (to store data), “methods” (event handler methods to
manipulate data).
• Every “angular 2+ application” contains at-least one component, which is called as “app
component”. You can create any no. of components in the project.
• The component is invoked (called) through a custom tag (user-defined tag). For example, “login
component” is invoked through <login></login> tag. The custom tag is also called as “selector”.
• The component class should have a decorator called “@Component()”, to define that the class is a
component class.
Syntax to create Component:

import { Component } from “@angular/core”;
@Component( meta data )
class classname
{
property: datatype = value;
method( arguments ) : returntype

{
}
}

Angular 7
Meta Data Properties of Component:
1 selector Represents the selector (tag) to invoke the component.
2 template Represents the template content of the component.

3 templateUrl Represents the html file that has to be rendered when the component is
invoked.
4 styleUrlsRepresents the list of style sheets (css files) that have to be loaded for the
component.
5 providers Represents the list of services to be imported into the component.
6 animationsRepresents the list of animations to be performed in the component.
What is Module?
• Module is a part of the project.
• Module is a collection of components, directives and pipes that are related to one specific task of
the project.
• Ex: “Net banking” project contains modules like “Savings account module”, “Credit cards module” etc.
• Every angular application should contain at least one module, which is called as “root module” or
“app module”. The “app component” will be a part of the “app module”. Modules can share its
components and pipes to other modules.
• Module is a class, with “@NgModule” decorator.
Syntax to create Module:

import { NgModule } from “@angular/core”;
@NgModule( meta data )
class classname
{
}
Meta Data Properties of Module:
1 declarations
Represents the list of components and pipes that are members of the current module.
2 imports
Represents the list of modules that you want to import into the current module.
You must import “BrowserModule” into the browser, which can be imported from
“@angular/platform-browser”.

Angular 7
The “BrowserModule” imports “ApplicationModule” from “@angular/core”,

“CommonModule” from “@angular/common” and re-exports them.
The “BrowserModule” must be imported only in the “app module (root module)”;
we need not import it in other child modules.
Other modules to import: FormsModule, ReactiveFormsModule,
BrowserAnimationsModule, HttpClientModule, RouterModule etc.
3 exports
Represents the list of components or pipes that are to be exported to other modules.
4 bootstrap
Represents the component that is to be displayed in the web page. Only “app
module” has to bootstrap “app component”. Other modules should not bootstrap
any component.
5 providers
Represents list of services to be imported into the module.
Syntax to bootstrap (start) the module into the browser:

import { platformBrowserDynamic } from “@angular/platform-browser-
dynamic”; platformBrowserDynamic( ).bootstrapModule( moduleclassname );
• The “data binding” is the relation between “component” and the “template”.
• When the value of “component” is changed, the “template” will be changed automatically. When the
value of “template” is changed, the “component” will be changed automatically.
• Data binding is four types:
A) Interpolation Binding
B) Property Binding
C) Event Binding
D) Two-Way Binding

Angular 7
A) Interpolation Binding
• Syntax: {{property}}
• It displays the value of the property in the template.

• When the value of the property is changed, the same value will be automatically updated in the template.
B) Property Binding
• Syntax: <tag [attribute]=” property ”> </tag>
• “Property binding” is used to send data from component to template and assign the same
into an attribute of the tag.
• When the value of the property is changed, the same value will be automatically updated
in the template.
C) Event Binding
• Syntax: <tag (event)=”method( )”> </tag>
• It is used to pass event notifications from template to component.

Angular 7
D) Two-Way Binding
• Syntax: <tag [(ngModel)]=”property”> </tag>
• “Two Way Binding” (a.k.a Two-Way Data Binding) is a combination of both “property
binding” and “event binding”.
• When you change the value of “property”, the same will be automatically updated in the
“html element”.
• When you change the value of “html element”, the same will be automatically updated
in the “property”.
• The “ngModel” is a pre-defined directive, which is used to create two-way binding.
• Two-Way Binding is applicable only for <input> and <select> tags.
• “FormsModule” must be imported in order to use two-way binding.
Data Bindings - Example
Creating Application
ng new app1
c:\angular\app1\package.json

Angular 7
c:\angular\app1\src\app\app.module.ts

Angular 7
c:\angular\app1\src\app\app.component.ts
c:\angular\app1\src\app\app.component.html

Angular 7
Executing the application:

commands: cd c:\angular\app1
ng serve
• Open the browser and enter the following

URL: http://localhost:4200

Angular 7
Login - Example
Creating Application
ng new app1

Angular 7
c:\angular\app1\package.json

Angular 7 1 100

Uploaded by

Copyright:

Available Formats

Angular 7 1 100

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular 7 1 100

Uploaded by

Copyright:

Available Formats

ANGULAR 7

D. Harsha Vardhan (UI Expert) P a g e 8 | 454

3) Create Application Folder

4) Installing the Code Editor: Visual Studio Code

5) Create TypeScript Program

6) Compile the TypeScript Program

7) Execute the TypeScript Program

D. Harsha Vardhan (UI Expert) P a g e 9 | 454

D. Harsha Vardhan (UI Expert) P a g e 10 | 454

• Go to Downloads folder and double click on “node-v10.7.0-x64.msi”.

D. Harsha Vardhan (UI Expert) P a g e 11 | 454

D. Harsha Vardhan (UI Expert) P a g e 12 | 454

• Installation is in progress now.

D. Harsha Vardhan (UI Expert) P a g e 13 | 454

• After installation is completed, click on “Finish”. Now NodeJS installation is finished.

D. Harsha Vardhan (UI Expert) P a g e 14 | 454

• After pressing Enter:

• Now TypeScript successfully installed.

3) Create Application Folder

• Right click on the empty area and click on “New Folder”.

D. Harsha Vardhan (UI Expert) P a g e 15 | 454

D. Harsha Vardhan (UI Expert) P a g e 16 | 454

• Type the folder name as “angular” and press Enter.

• The “c:\angular” folder is ready now.

4) Installing Visual Studio Code

D. Harsha Vardhan (UI Expert) P a g e 17 | 454

• Click on “Download for Windows”.

• Double click on “VSCodeSetup-x64-1.25.1.exe” file.

D. Harsha Vardhan (UI Expert) P a g e 18 | 454

• Click on “I accept the agreement”.

D. Harsha Vardhan (UI Expert) P a g e 19 | 454

D. Harsha Vardhan (UI Expert) P a g e 20 | 454

D. Harsha Vardhan (UI Expert) P a g e 21 | 454

• Installation is going on….

5) Create TypeScript Program

• Visual Studio Code opened.

D. Harsha Vardhan (UI Expert) P a g e 22 | 454

• Go to “File” – “New File”.

• Go to “File” menu – “Save” (or) Press Ctrl+S.

D. Harsha Vardhan (UI Expert) P a g e 23 | 454

• Select “c:\angular” folder and enter the filename as “first.ts”.

6) Compile the TypeScript Program

D. Harsha Vardhan (UI Expert) P a g e 24 | 454

7) Execute the TypeScript Program

D. Harsha Vardhan (UI Expert) P a g e 25 | 454

2. string: Collection of characters in double quotes or single quotes. Ex: “hello”

3. boolean: true or false

4. any: Any type of value

Variables and Data Types - Example

Compilation and Execution

D. Harsha Vardhan (UI Expert) P a g e 26 | 454

D. Harsha Vardhan (UI Expert) P a g e 27 | 454

• Syntax to create Object:{ property: value, …, method: function( ) { code here } }

Compilation and Execution

D. Harsha Vardhan (UI Expert) P a g e 28 | 454

D. Harsha Vardhan (UI Expert) P a g e 29 | 454

Steps for working with classes and objects

• Create an Object & Store its address in Reference Variable

var referencevariablename = new classname( );