Angular 4 – Overview

Angular 4 – Overview ”; Previous Next There are three major releases of Angular. The first version that was released is Angular1, which is also called AngularJS. Angular1 was followed by Angular2, which came in with a lot of changes when compared to Angular1. The structure of Angular is based on the components/services architecture. AngularJS was based on the model view controller. Angular 4 released in March 2017 proves to be a major breakthrough and is the latest release from the Angular team after Angular2. Angular 4 is almost the same as Angular 2. It has a backward compatibility with Angular 2. Projects developed in Angular 2 will work without any issues with Angular 4. Let us now see the new features and the changes made in Angular 4. Why Angular4 and Not Angular3? The Angular team faced some versioning issues internally with their modules and due to the conflict they had to move on and release the next version of Angular – the Angular4. Let us now see the new features added to Angular 4 − ngIf Angular2 supported only the if condition. However, Angular 4 supports the if else condition as well. Let us see how it works using the ng-template. <span *ngIf=”isavailable; else condition1″>Condition is valid.</span> <ng-template #condition1>Condition is invalid</ng-template> as keyword in for loop With the help of as keyword you can store the value as shown below − <div *ngFor=”let i of months | slice:0:5 as total”> Months: {{i}} Total: {{total.length}} </div> The variable total stores the output of the slice using the as keyword. Animation Package Animation in Angular 4 is available as a separate package and needs to be imported from @angular/animations. In Angular2, it was available with @angular/core. It is still kept the same for its backward compatibility aspect. Template Angular 4 uses <ng-template> as the tag instead of <template>; the latter was used in Angular2. The reason Angular 4 changed <template> to <ng-template> is because of the name conflict of the <template> tag with the html <template> standard tag. It will deprecate completely going ahead. This is one of the major changes in Angular 4. TypeScript 2.2 Angular 4 is updated to a recent version of TypeScript, which is 2.2. This helps improve the speed and gives better type checking in the project. Pipe Title Case Angular 4 has added a new pipe title case, which changes the first letter of each word into uppercase. <div> <h2>{{ ”Angular 4 titlecase” | titlecase }}</h2> </div> The above line of code generates the following output – Angular 4 Titlecase. Http Search Parameters Search parameters to the http get api is simplified. We do not need to call URLSearchParams for the same as was being done in Angular2. Smaller and Faster Apps Angular 4 applications are smaller and faster when compared to Angular2. It uses the TypeScript version 2.2, the latest version which makes the final compilation small in size. Print Page Previous Next Advertisements ”;

Angular 4 – Components

Angular 4 – Components ”; Previous Next Major part of the development with Angular 4 is done in the components. Components are basically classes that interact with the .html file of the component, which gets displayed on the browser. We have seen the file structure in one of our previous chapters. The file structure has the app component and it consists of the following files − app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts The above files were created by default when we created new project using the angular-cli command. If you open up the app.module.ts file, it has some libraries which are imported and also a declarative which is assigned the appcomponent as follows − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } The declarations include the AppComponent variable, which we have already imported. This becomes the parent component. Now, angular-cli has a command to create your own component. However, the app component which is created by default will always remain the parent and the next components created will form the child components. Let us now run the command to create the component. ng g component new-cmp When you run the above command in the command line, you will receive the following output − C:projectA4Angular 4-app>ng g component new-cmp installing component create srcappnew-cmpnew-cmp.component.css create srcappnew-cmpnew-cmp.component.html create srcappnew-cmpnew-cmp.component.spec.ts create srcappnew-cmpnew-cmp.component.ts update srcappapp.module.ts Now, if we go and check the file structure, we will get the new-cmp new folder created under the src/app folder. The following files are created in the new-cmp folder − new-cmp.component.css − css file for the new component is created. new-cmp.component.html − html file is created. new-cmp.component.spec.ts − this can be used for unit testing. new-cmp.component.ts − here, we can define the module, properties, etc. Changes are added to the app.module.ts file as follows − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import { NewCmpComponent } from ”./new-cmp/new-cmp.component”; // includes the new-cmp component we created @NgModule({ declarations: [ AppComponent, NewCmpComponent // here it is added in declarations and will behave as a child component ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given. }) export class AppModule { } The new-cmp.component.ts file is generated as follows − import { Component, OnInit } from ”@angular/core”; // here angular/core is imported . @Component({ // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same. selector: ”app-new-cmp”, // templateUrl: ”./new-cmp.component.html”, // reference to the html file created in the new component. styleUrls: [”./new-cmp.component.css”] // reference to the style file. }) export class NewCmpComponent implements OnInit { constructor() { } ngOnInit() {} } If you see the above new-cmp.component.ts file, it creates a new class called NewCmpComponent, which implements OnInit.In, which has a constructor and a method called ngOnInit(). ngOnInit is called by default when the class is executed. Let us check how the flow works. Now, the app component, which is created by default becomes the parent component. Any component added later becomes the child component. When we hit the url in the http://localhost:4200/ browser, it first executes the index.html file which is shown below − <!doctype html> <html lang = “en”> <head> <meta charset = “utf-8”> <title>Angular 4App</title> <base href = “/”> <meta name=”viewport” content=”width = device-width, initial-scale = 1″> <link rel = “icon” type = “image/x-icon” href = “favicon.ico”> </head> <body> <app-root></app-root> </body> </html> The above is the normal html file and we do not see anything that is printed in the browser. Take a look at the tag in the body section. <app-root></app-root> This is the root tag created by the Angular by default. This tag has the reference in the main.ts file. import { enableProdMode } from ”@angular/core”; import { platformBrowserDynamic } from ”@angular/platform-browser-dynamic”; import { AppModule } from ”./app/app.module”; import { environment } from ”./environments/environment”; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule); AppModule is imported from the app of the main parent module, and the same is given to the bootstrap Module, which makes the appmodule load. Let us now see the app.module.ts file − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import { NewCmpComponent } from ”./new-cmp/new-cmp.component”; @NgModule({ declarations: [ AppComponent, NewCmpComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Here, the AppComponent is the name given, i.e., the variable to store the reference of the app. Component.ts and the same is given to the bootstrap. Let us now see the app.component.ts file. import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”Angular 4 Project!”; } Angular core is imported and referred as the Component and the same is used in the Declarator as − @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) In the declarator reference to the selector, templateUrl and styleUrl are given. The selector here is nothing but the tag which is placed in the index.html file that we saw above. The class AppComponent has a variable called title, which is displayed in the browser. The @Component uses the templateUrl called app.component.html which is as follows − <!–The content below is only a placeholder and can be replaced.–> <div style=”text-align:center”> <h1> Welcome to {{title}}. </h1> </div> It has just the html code and the variable title in curly brackets. It gets replaced with the value, which is present in the app.component.ts file. This is called binding. We will discuss the concept of binding in a subsequent chapter. Now that we have created a new component called new-cmp. The same gets included in the app.module.ts file, when the command is run for creating a new component. app.module.ts has a reference to the new