Structural Built-In Directives
Our third key change is the structural built-in directives, Angular 1 came with a lot of built in Directives, we will take a look of two of the most common ng-repeat and ng-if, ng-repeat will loop on a list of something, and ng-if to display something conditionally.
In angular 2 we have *ngFor and *ngIf, we still have this structural built in directives but with a different syntax though , the * represents a structural directive, which means that it's changing the structure of what is in the page, and in the *ngFor we have a local variable, the #vehicle, which allows us to refer the vehicle in the <li>; also notice that in Angular 1 we use the key word “in” while for Angular 2 we use the keyword “of.”
Data Binding
Interpolation
In Angular 1 we need to use the context, in this case the initial vm. In Angular 2 we already have the context, so no big change here.
Angular 1 Angular 2
One Way Binding
In Angular 1 we could use ng-bind directive in angular 2 we use the [ ] around the property so now we can take any html property and bind it to a model.
Angular 1 Angular 2
Event Binding
In Angular 1 we used ng-click or ng-blur directives, in Angular 2 we take the same property in the HTML and select the event called click or blur and wrap it with parentheses, there are no directives for this elements in Angular 2 this are the actual HTML events.
Two Way Binding
In Angular 1 we use ng-model to set the property and we have the 2 way binding, this makes it go to the view, then the controller and back and forth. In Angular 2 we have a special directive called ngModel which will bind the property, but it will have this different syntax that wraps ngModel with [()] this is a special syntax that is known as “Banana in a box” that will give us the 2 way binding.
Removes the need for many directives
Angular 2 reduces the number of directives that were used in Angular 1.
For example in Angular 1 we have ng-style, ng-src, ng-href, so we can set the style depending on some conditions, or to set the source to an image or an url.
In Angular 2 we don't need any of those directives, we bind to the HTML attributes with the []; there are 40+ Angular 1 Built-In Directives that have been removed, this makes it easier because we now bind to a property or an event and do not need to look for a built-in directive to use.
This were some basic examples of the main differences between Angular 1 and Angular 2, there are still other changes, e.g. Filters in Angular 1 now became Pipes in Angular 2 among others, but these are the key updates.
In conclusion we can see that these updates makes of Angular 2 more OOP, simpler and quicker to use, making use classes and removing 40+ Directives - most of them now translated or binded to the HTML Element property of event; the core function of angular is still there but improved.