Angular 4 doesn't change that much as compare to Angular 2. They have deprecated some old features and added some new however Angular 4 shouldn't have any breaking changes. We can still use deprecated features as it is deprecated not removed but for safe side if possible use Angular 4 as in future it will be removed completely.
So many people was confused even I that why Angular 4 and why not Angular 3? It's not so complicated, the reason I found like because of their internal versioning conflicts they skipped Angular 3 and moved on Angular 4.
Change 1: They have changed *ngif conditional pattern and made it very clear If Else pattern.
See example below:
Angular 2:*ngIf (Depricated):
<div *ngIf="showText">If part to display text</div>
<div *ngIf="!showText">Else part to display text</div>
Angular 4:*ngIf (New):
<div *ngIf="showText; else elsePart">If part to display text</div>
<ng-template #elsePart>
<p>Else part to display text</p>
</ng-template>
Change 2: "Renderer" class changed to "Renderer2"
See example below:
Angular 2:Renderer (Depricated):
import {Component, Renderer} from '@angular/core'
export Class Add Component {
showText = true;
constructor (private renderer : Renderer ){}
onChangeBackground (element:HTMLElement){
this.renderer.setElementStyle(element,'background-color','red');
}
}
Angular 4:Renderer2 (New):
import {Component, Renderer2} from '@angular/core'
export Class Add Component {
showText = true;
constructor (private renderer : Renderer2 ){}
onChangeBackground (element:HTMLElement){
this.renderer.setElementStyle(element,'background-color','red');
}
}
New features By Angular 4:
Feature 1: Added new Email validation class so it replaced the regular expression pattern.
See example below:
Angular 2:Email pattren (Depricated):
<form #f="ngForm">
<input type="email" pattern="[a-z0-9!#$..........etc]" />
</form>
Angular 4:Email class (New):
<form #f="ngForm">
<input type="email" email />
</form>
Feature 2: Using updated Type Script version 2.2
Feature 3: Added seperate Animation package.
See example below:
Angular 2: Extends from core class:
import {
animate,state,style,transition,trigger
} from '@angular/core';
Angular 4:Extends from seperate animation class:
import {
animate,state,style,transition,trigger
} from '@angular/animations';
Please comments if you have any queries. Thanks!
Note: The above examples are just samples. You need to check syntax and find where exactly put this code.
