Angular is a JavaScript framework which is developed by Google. By using Angular developers can build Web Applications, mobile, and desktop Apps with web technologies like HTML, CSS, and JavaScript. Angular 1.x versions and Angular 2+ versions are totally different. Angular 1 controller based and using JS whereas Angular 2 fully component based using TypeScript.
The history of Angular is given below –


Angular 2+ | Angular 1.x |
---|---|
Components Based | Controller and scope Based |
Mobile First</td | Not built for mobile first |
Improved Dependency Injection | Supports Dependency Injection |
Supports ES5/6, TS or Dart | Supports ES5/6 or Dart |
Angular CLI Available | Doesn’t have any CLI |
Angular 2+ uses the classes for define the services | Classes are not available |
Can be run on client-side & server-side | Run on only client-side |
bootstrapModule() function is used to initialize the App | ng-app and angular.bootstrap() function are used to initialize the app |
Supports Pipes | filters |
Supports camelCase and PascalCase syntaxes Like ngModel, ngForm and NgForm | Supports spinal-case and camelCase syntaxes like ng-model, ng-class and ngModel |
Use Html DOM elements properties and events | Uses its own directives like ng-click, ng-show and ng-src etc. |
Use () for events and [] for attributes | Doesn’t support () and [] based syntax |
There are various reasons to use Angular which are listed below.
- Angular fully supports Single Page Application (SPA) framework
- Developed, Maintaining by Google and Open source
- It supports Typescript and ES7 standard
- By default it comes with Model-View-Controller Architecture
- Supports to enable testing using jasmine and karma
- Able to create a re-usable component, modules, routes
- Supports Dependency Injection implementation
- Great community support
Angular has comes with more features which makes it more useful to create any app easily, below is the list of important features and mail building blocks.
- Component
- Module
- Data bindings
- Services
- Dependency Injection
- Directives
- Templates
- Application Bootstrapping
- Navigation
Recently Angular has released its newer version Angular 9, and with this version, we got several updated as well as the new features and these are listed below.
- Smaller bundles and better performance
- Added undecorated classes migration schematic in the core.
- Support for TypeScript Diagnostics Format.
- The formControlName also accepts a number in the form.
- Internationalization support for Angular Ivy.
- Selector-less directives as base classes in View Engine in the compiler.
- Added support for selector-less directive as base classes in Ivy.
- Ivy compiler is now the default for ngc.
- Convert all ngtsc diagnostics to ts.Diagnostics.
- Bazel: support ts_librarytargets as entry-points for ng_package.
- Core: add dynamic queries schematic.
- Core: Mark getas deprecated.
- Ivy: expose ng.getDebugNodehelper and also support ng-add in localize package.
- Ivy: i18n —add syntax support for $localizemetadata block.
- Ivy: i18n — reorganize entry-points for better reuse.
- Language-service: enable logging on TypeScriptHost.
- Language-service: provide diagnostic for invalid templateUrls.
- Language-service: provide diagnostics for invalid styleUrls.
We know that it is difficult to keep in mind all those npm commands, but sometimes we may forget a few of them and get stuck, and at the end, we will find it with the help of different search engine. Using CLI prompts, now we can use different commands very easily like ng new and ng add. When we type ng new and then press the enter key, it will ask three different named and the sequence is listed below.
- Application name
- Enable routing
- The format of the stylesheet
To work with latest Materialized components, we need to update our latest angular material package using below command.
ng update @angular/material
ng update @angular/material
To optimize our Angular App, we have to very clear with the current bundle size. Based on the current size of our app, we can do optimization techniques. Run the below cmd to
ng serve
And you will get complete bundling details like this into your console.
ng serve
And you will get complete bundling details like this into your console.
There are some prerequisites to learn Angular, which are listed below.Basic knowledge of JavaScript Basic knowledge of HTML Basic knowledge of CSS Knowledge of Typescript add an advantage Any IDE to work with Angular
As per angular office document, below is the pictorial diagram of angular architecture.


Module is a bundle of functionalities of the Application. Modules are piece of code and it divides your application into small bundle of tasks.
NgModule is a decorator which have metadata of the module. It describes components, services, directives, pipes, etc.
NgModule decorator having the following metadata properties :
- declarations : Declare view related things like component, custom directives, pipes to make available in this module.
- exports : To makes the declaration stuffs to available on other modules.
- imports : import the other modules features.
- providers : Register the set of servicesof the Application.
The Abbreviation of CLI is Command Line Interface. It is a command line tool which is used to create, initialize, generate andto manage the angular application easily. Angular CLI comes with many inbuilt cmds, by using these cmds we can easily manage the Application. Install the Angular CLI by using the below cmd,
npm install -g @angular/cli
npm install -g @angular/cli
Angular CLI is a powerful command-line tool by which we can create new Angular stuffs, build, test and deploy the angular application.Bootstrapping Angular app Code generation options for Component, Module, Class, Pipes, Services, Enums. Unit test runs Testing Angular app Build and deployment our Angular application
Components are the main building block of an Angular Application.Angular apps have collection of Angular component trees. Components also one of the directives with View. If you want to render any view on the browser, component is the main part.
Directives are Instructions to the DOM. Directives instruct how to behave an existing DOM element.Directive update the appearance of a DOM element.
There are three types of directive in angular and these are as follows:
- Component or Template Directive : It renders a View or Template.
- Structural directives : It changes or updates structure of the DOM like Adding or removing DOM elements based on the given condition.
- Attribute directives :It changes or updates the appearance of the DOM like Adding or Removing DOM attributes based on the given condition.
Components | Directive |
---|---|
Component use @Component decorator and its meta-data properties. | Directives use @Directive decorator and its meta-data properties. |
Components are mainly used to Render Views. | Directive are used to change the behaviouror update DOM structure of the DOM element. |
It is used to divide the application into smaller views. | It is used to manipulate DOMs. |
Holding Application Views | Does not have any Views |
Angular Command Line Interface is the tool and by using this tool, we can scaffold, initialize, generate different files, and can build or deploy the angular application easily.
To use different commands, we should install the package by using npm below command.
npm install -g @angular/cli
npm install -g @angular/cli
There are 8 angular lifecycle hooks are as follows:
- ngOnChanges: This method is called When the value of a data bound property changes.
- ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
- ngDoCheck: This is for the change detection and to act on changes that Angular cannot or won’t detect on its own.
- ngAfterContentInit: This is called in response after Angular projects external content into the component’s view.
- ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
- ngAfterViewInit: This is called in response after Angular initializes the component’s views and child views.
- ngAfterViewChecked: This is called in response after Angular checks the component’s views and child views.
- ngOnDestroy: This is the clean-up phase just before Angular destroys the directive/component.
To create a new Angular app using CLI command, then we can use below command.
ng new
It will take a few seconds or minutes based on our internet connection speed and then the new angular app will be created with the basic configuration.
ng new
It will take a few seconds or minutes based on our internet connection speed and then the new angular app will be created with the basic configuration.
After creating a new Angular app, now it’s time to compile our app, for that we can use below command to serve our app.
ng serve
After executing above given command, our application will start building and it can also be helpful to rebuild the app after any changes occurred. If you want to open app automatically into a new window from the browser then we can use the flag –o like this.
ng serve –o
ng serve
After executing above given command, our application will start building and it can also be helpful to rebuild the app after any changes occurred. If you want to open app automatically into a new window from the browser then we can use the flag –o like this.
ng serve –o
If you have created new Angular app and server the app using ng serve, then our app will be executed on URL localhost:4200, but we can change it using an additional flag along with ng serve which is –port.
ng serve –port 4300
ng serve –port 4300
An Angular component mainly contains a view, class, and metadata. It is used to represent the data visually in our view. A component can be thought as a web page. An Angular component is exported as a custom HTML tag like as:
. When we create a new Angular app using CLI, it will create default App component as the entry component of application. If we are using Angular CLI than new component will be created using the below ng command.
ng generate component componentName
. When we create a new Angular app using CLI, it will create default App component as the entry component of application. If we are using Angular CLI than new component will be created using the below ng command.
ng generate component componentName
Data binding is one of the main building blockof Angular application which establish communication between a component and the DOM element.
There are four types of data binding in angular and these are as follows:
A) Interpolation : {{ value }} adds the value of a property from the component to DOM
B) Property binding : Value is passed from the component to the specified html attribute: Syntax : [property]=”value”
C) Event binding : When a specific DOM event happens like click, change, keyup etc., then call the specified method of the component. The communication is DOM to Component.
Syntax : (event)=”functionName()”
D) Two-way Binding : Two-way data binding allows in both ways component to DOM and voice-versa. Syntax : [(ngModel)]=”value”
A) Interpolation : {{ value }} adds the value of a property from the component to DOM
B) Property binding : Value is passed from the component to the specified html attribute: Syntax : [property]=”value”
C) Event binding : When a specific DOM event happens like click, change, keyup etc., then call the specified method of the component. The communication is DOM to Component.
Syntax : (event)=”functionName()”
D) Two-way Binding : Two-way data binding allows in both ways component to DOM and voice-versa. Syntax : [(ngModel)]=”value”
Interpolation expressions are the same expression that we use with JavaScript. But the difference is that we can use it within our Html template, so it looks like that we are using JavaScript along with Html but keep in mind that not every JavaScript expressions are supported like (new), (++) and (–).
Property binding is generally used to show or update the value of the variables in component and vice versa. We can also call it one-way data binding thus it is not used to update the two-way binding mechanism, and value will be reflected at the component level.
Two-way binding is one of the strongest binding mechanisms, where two different bindings are merged
i.e. input and output bindings.
It means that Event binding works with the two different binding mechanisms at a time and generates the output based on the event which was triggered.
For two-way data binding, we will use the punctuation [( )] in order to bind the two-way data.
It can be happen using the directive called ngModel which listen to the input for any changes and return the output.
We will understand more by implementing the simple example, where we will type the text into the input and at the same time, we will get the value of the same input value.
Metadata is used to decorate the class so that it can configure the expected behaviour of a class. Metadata can be attached to the TypeScript using the decorator.
A) Class decorators : e.g. @NgModule and @Component B) Property decorators Used for properties inside component. for example, @Input and @Output C) Method decorators: Used for methods inside component class, e.g. @HostListener D) Parameter decorators Used for parameters inside component class constructors, e.g. @Inject
Constructor | ngOnInit |
---|---|
It is a default method of the class that is executed when the class is instantiated. | It is a component life cycle hook called by Angular to indicate that the Angular is done creating the component. | Used for Injecting dependencies | business logic performed | Called by JavaScript engine | Called by angular |
Not everything in component is initialized at the time of invocation | Everything is ready at the time of invocation |
No need to import anything | In order to use OnInit we have to import it in the component class like this: import {Component, OnInit} from ‘@angular/core’; |