Angular 4 | Introduction

Angular 4 was released 5 years after the official release of AngularJS. Between these two versions, Angular 2 was introduced which was a complete re-write of AngularJS. The 'MVC' architecture of AngularJS was discarded a new 'service-controller' architecture was introduced in Angular 2. After Angular 2 came Angular 4 which was much more efficient than its predecessor. However, the architecture used in both the versions was the same and thus upgrading the project from v2 to v4 was comparatively easier, than upgrading from JS to v2. Angular 3 was skipped because the router package was already in version 3.3.0. To avoid any further glitches, the team decided to skip v3.x and upgrade all the other modules directly to v4.0. The angular 4 initially release in March 2017. Features:

• Architecture: MVC architecture of AngularJS was replaced by a 'service-controller' architecture.
• View Engine: The view engine helps in reducing the component code by 60%. This makes the application lightweight as the bundles are reduced in size by several kilobytes.
• Animation: Animation now has a separate package. Animation can also be imported from the BrowserAnimationsModule from @angular/platform-browser/animations.
• Typescript: Angular 4 uses Typescript v2.2. Typescript is considered to be the superset of Javascript.
• New Keywords: Some new keywords like 'as' was introduced. This is generally used to store the output of a slice or a command in some variable. The 'else' condition was also introduced in Angular 4. The introduction of the 'if-else; looping condition helped in code condensation.
  • Use of 'as' keyword: javascript

    <div *ngFor="let j of weeks | slice:0:5 as num">
       Months: {{j}} Num: {{num.length}}
    </div>
    

  • Use of 'if-else' condition in Angular 4: The 'ngIf' outputs 'Valid Condition', whereas the 'else' condition outputs 'Invalid Condition'. html

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

• Mobile Support: Angular 4 is supported by almost every modern day mobile browser.
• HTTP Search Parameter: There is no need to call the URLSearchParams for the HTTP search parameter.
• Compatibility with the previous version: Angular 4 is compatible with Angular 2 and AngularJS. Projects developed in Angular 2 will work without any problem in Angular 4.