main banner

Development

Angular 2: Key Structural Changes

There are some changes on how Angular 1 and Angular 2 work, next we will show what we think are the key main updates made and how to use them.


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.

Angular code

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.”

Angular code

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

Angular code

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

Angular code

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.

Angular code

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.

Angular code

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.

Angular code

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.

 
Angular code

 

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.



Hugo C

The guy who wears the coolest t-shirts at the office, Hugo has a B.S. in Software Engineering and comes from Torreon. With over 9 years of developing experience working with VB6, Web development, SharePoint, SQL, he is part of the bloggers crew. He is The Legend of Zelda and Lord of the Rings fan, videogames and dog enthusiast and enjoys practicing Krav Maga.



Articles