What is Angular 4

What is Angular 4 and why to use it

Posted by

What is Angular 4:

In this very first lesson, we are going to discuss, What is Angular 4 and why to use it. If you want clear understanding, then don’t forget to watch the video tutorials, in addition, you can also watch more video on YouTube by clicking on Angular  Course for Beginner. furthermore, the content in this lesson is arranged as follow:

  1. About Angular 4
  2. Requirements
  3. History
  4. New features

About Angular 4:

What is Angular 4? Angular-4, is one of the most widely used JavaScript framework. Most of the Developers,  now a days used it for  web development. Angular 4 provides built-in features like HTTP Service, Toolbar, Navigation, Menus, and Animations etc. The code of this framework is written in TypeScript.

Requirements for Angular 4:

Before moving forward in this series,  you should need to have a basic understanding of the following:

  • Hypertext Markup Language (HTML)
  • Cascading Stylesheet (CSS)
  • JavaScript
  • DOM (Document Object Model) and
  • TypeScript

Angular 4 – History:

First of all, it is important that you know the history. The angular has three major versions. The first version is AngularJS, which is also known as Angular-1. AngularJS, or Angular-1 is based on Model View Controller (MVC). The next version is Angular-2, which is released with a lot of changes related to AngularJS. The version Angular-4 was released in March 2017, which is known to be a major breakthrough after Angular-2. Angular 4 is similar to Angular-2. The project developed in Angular-2 will also work with Angular-4 without any confusion. The new features of Angular-4 will be discussed later in the course.

New Features in Angular 4:

Angular 4 come with lots of great, and exciting features. The new features are discussed below:


Compare to Angular 2, Angular 4 supports the (if else) condition as well. Angular 2 only support if condition. See the below example to know how it works.

<span *ngIf=”isavailable; else condition1”> Valid Condition </span>
<ng-template #condition1> Invalid Condition </ng-template>


Animation is a separate package in Angular 4. Hence, it can be imported from @angular/animations. Compare, to Angular 2; it was with the command

@angular/core. It is still available for backward compatibility.

“as” keyword in for loop:

Opposite, to Angular 2; “as” keyword is available in Angular 4 with for loop.


One of the major change in this framework is the modification of <ng-template> instead of, <template>. While, Angular 2 used <template>. The reason behind this is the conflict with HTML. Because, HTML also used a tag called <template>. Therefore, it is changed from <template> to <ng-template>.

Pipe Title Case:

New feature called Pipe Title Case is added, so it change every first letter to UPPERCASE.

     <h3> {{ 'Angular 4 titlecase' | titlecase }} </h3>


The above code generates this output: Angular 4 Titlecase

Faster and Smaller Applications:

The applications written in this framework are generally smaller in size and, load faster as the it create a single page reactive applications. In addition, It uses 2.2 version of TypeScript.


Angular 4 is updated to the latest version of TypeScript 2.2. Hence, it greatly enhanced the loading speed of an application.

HTTP Search Parameters:

HTTP get API is simplified. Hence, Now developers don’t need to call URLSearchParams, which was also done in the previous version of Angular named Angular 2.

Suggested Book

ng-book: The Complete Guide to Angular 4

ng-book. The in-depth, complete, and up-to-date book on Angular 4. Become an Angular 4 expert today.