Angular is a most popular platform for building applications with the web. Angular empowers developers to build applications that live on the web, mobile, or the desktop. The AngularCLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
As compared to the older versions of Angular, there are many new things added to the list. Not only new features but also some twists are there that enhance old features. Forget Angular 3, Google jumps straight to Angular 4 after Angular 2. Angular4 applications are much faster and less space consuming. Angular4 is compatible with TypeScript’s newer versions 2.1 and 2.2. Components are the basic building blocks of your application. Every component has an associated template, style sheet, and a class with logic.
Prerequisites
1. NodeJS ( 6.x.x or greater ) 2. npm (3.x.x or greater )Installation
1. You have to install AngularCLI globally.npm install -g @angular/cli2. Create a new project.
ng new my-app3. To serve the application, get into the project repo and run :
cd my-app ng serve --openFor launching our server and for rebuilding our app when there are any changes we are using “ng serve”. When using “–open” or “–o”, it will open in “http://localhost:4200/” automatically.
And that’s it!
Your basic app is ready!What’s New In Angular 4
Router ParamMap
In the previous versions, we were using a simple key-value object for storing route parameters. But in Angular4, it is possible to query a so-called ParamMap in the router, that is a request for the route- and query parameter assigned to a route.class MyComponent {
sessionId: Observable<string>;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route
.queryParams
.map(params => params['session_id'] || 'None');
}
}
Now, we can run them as simple method calls (parameterMap.get(‘parameter-name’)).
class MyComponent {
sessionId: Observable<string>;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route
.queryParamMap
.map(paramMap => paramMap.get('session_id') || 'None');
}
}
The parameters are also available as a map. This brings advantage in terms of type security. The old key-value structure is unsafe since it can take all possible values. In the map, the parameter value is either string or array of strings depending upon the method used. Hence it is safe.
Animation Package
All the functions of animation were provided in @angular/core module. So it was always there with our application even if we didn’t use it and many unnecessary bundles were created. To avoid this, these functions have been put into its own packages. So that this extra code will not end up in your production bundles if you didn’t use that. We can add animations ourselves in the main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.Improved *ngIf and *ngFor
It’s now also possible to use anelse syntax in your templates. In the else-case, a separately referenced template is used in place of the element marked with *ngIf.
<div *ngIf="races.length > 0; else empty"><h2>Races</h2></div> <ng-template #empty><h2>No races.</h2></ng-template>Another addition to the template syntax is the
as keyword, to simplify the let syntax. We can store the result in a variable of the template so that we can use it in the element.
<div *ngFor="let pony of ponies | slice:0:2 as total; index as i">
{{i+1}}/{{total.length}}: {{pony.name}}
</div>
