Category: angular7

Angular7 – Overview ”; Previous Next Angular 7 is owned by Google and the stable release was done on 18th October 2018. This is the latest version of Angular. Below is the list of Angular versions released so far − Version Released Date Angular JS October 2010 Angular 2.0 Sept 2016 Angular 4.0 March 2017 Angular 5.0 November 2017 Angular 6.0 May 2018 Angular 7.0 October 2018 The release dates for the next two major upcoming versions of Angular are given below − Version Released Date Angular 8.0 March/April 2019 Angular 9.0 September/ October 2019 Google plans to release the major Angular version every 6 months. The version released so far are backward compatible and can be updated to the newer one very easily. Let us discuss the new features added to Angular 7. Angular Update to V7 Angular 7 is a major release where in the angular core framework, Angular CLI, Angular Materials are updated. In case you are using Angular 5 or 6 and want to update to Angular 7, below is the command which will update your app to the recent version of Angular − ng update @angular/cli @angular/core Angular CLI While doing project setup using angular CLI, it prompts you about the built-in features available, i.e., routing and stylesheet support as shown below − Application Performance In Angular 7, there is bundle budget added in angular.json as shown below − Budgets is a feature added to Angular CLI which allows you to set limit inside your configuration to make sure your application size is within the limit set. You can set the size so that the app can be warned when the limit is crossed. Angular Material and CDK The version of Angular Material/CDK is updated in Angular 7. Also there are 2 features added to CDK − virtual scrolling, and drag and drop. Virtual Scrolling Virtual scrolling feature shows up the visible dom elements to the user, as the user scrolls, the next list is displayed. This gives faster experience as the full list is not loaded at one go and only loaded as per the visibility on the screen. Drag and Drop You can drag and drop elements from a list and place it wherever required within the list. The new feature is very smooth and fast. Print Page Previous Next Advertisements ”;

Angular7 – Pipes ”; Previous Next In this chapter, we will discuss about Pipes in Angular 7. Pipes were earlier called filters in Angular1 and called pipes from Angular2 onwards. The | character is used to transform data. Following is the syntax for the same − {{ Welcome to Angular 7 | lowercase}} It takes integers, strings, arrays, and date as input separated with | to be converted in the format as required and display the same in the browser. Let us consider a few examples using pipes. Here, we want to display the text given to uppercase. This can be done using pipes as follows − In the app.component.ts file, we have defined the title variable as follows − app.component.ts import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”Angular 7 Project!”; } The following line of code goes into the app.component.html file − <b>{{title | uppercase}}</b><br/> <b>{{title | lowercase}}</b> The browser appears as shown in the following screenshot − Here are some built-in pipes available with angular − Lowercasepipe Uppercasepipe Datepipe Currencypipe Jsonpipe Percentpipe Decimalpipe Slicepipe We have already seen the lowercase and uppercase pipes. Let us now see how the other pipes work. The following line of code will help us define the required variables in 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 7 Project!”; todaydate = new Date(); jsonval = {name:”Rox”, age:”25”, address:{a1:”Mumbai”, a2:”Karnataka”}}; months = [“Jan”, “Feb”, “Mar”, “April”, “May”, “Jun”, “July”, “Aug”, “Sept”, “Oct”, “Nov”, “Dec”]; } We will use the pipes in the app.component.html file as shown below − <!–The content below is only a placeholder and can be replaced.–> <div style = “width:100%;”> <div style = “width:40%;float:left;border:solid 1px black;”> <h1>Uppercase Pipe</h1> <b>{{title | uppercase}}</b> <br/> <h1>Lowercase Pipe</h1> <b>{{title | lowercase}}</b> <h1>Currency Pipe</h1> <b>{{6589.23 | currency:”USD”}}</b> <br/> <b>{{6589.23 | currency:”USD”:true}}</b> // Boolean true is used to get the sign of the currency. <h1>Date pipe</h1> <b>{{todaydate | date:”d/M/y”}}</b> <br/> <b>{{todaydate | date:”shortTime”}}</b> <h1>Decimal Pipe</h1> <b>{{ 454.78787814 | number: ”3.4-4” }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed. </div> <div style = “width:40%;float:left;border:solid 1px black;”< <h1<Json Pipe</h1> <b>{{ jsonval | json }}</b> <h1>Percent Pipe</h1> <b>{{00.54565 | percent}}</b> <h1>Slice Pipe</h1> <b>{{months | slice:2:6}}</b> // here 2 and 6 refers to the start and the end index </div> </div> The following screenshots show the output for each pipe − How to Create a Custom Pipe? To create a custom pipe, we have created a new ts file. Here, we want to create the sqrt custom pipe. We have given the same name to the file and it looks as follows − app.sqrt.ts import {Pipe, PipeTransform} from ”@angular/core”; @Pipe ({ name : ”sqrt” }) export class SqrtPipe implements PipeTransform { transform(val : number) : number { return Math.sqrt(val); } } To create a custom pipe, we have to import Pipe and Pipe Transform from Angular/core. In the @Pipe directive, we have to give the name to our pipe, which will be used in our .html file. Since, we are creating the sqrt pipe, we will name it sqrt. As we proceed further, we have to create the class and the class name is SqrtPipe. This class will implement the PipeTransform. The transform method defined in the class will take argument as the number and will return the number after taking the square root. Since we have created a new file, we need to add the same in app.module.ts. This is done as follows − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppRoutingModule } from ”./app-routing.module”; import { AppComponent } from ”./app.component”; import { NewCmpComponent } from ”./new-cmp/new-cmp.component”; import { ChangeTextDirective } from ”./change-text.directive”; import { SqrtPipe } from ”./app.sqrt”; @NgModule({ declarations: [ SqrtPipe, AppComponent, NewCmpComponent, ChangeTextDirective ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } We have created the app.sqrt.ts class. We have to import the same in app.module.ts and specify the path of the file. It also has to be included in the declarations as shown above. Let us now see the call made to the sqrt pipe in the app.component.html file. <h1>Custom Pipe</h1> <b>Square root of 25 is: {{25 | sqrt}}</b> <br/> <b>Square root of 729 is: {{729 | sqrt}}</b> Following is the output − Print Page Previous Next Advertisements ”;

Angular7 – Templates ”; Previous Next Angular 7 uses the <ng-template> as the tag instead of <template>which is used in Angular2. <ng-template> has been in use since the release of Angular 4 , and the earlier version i.e Angular 2 uses <template> for the same purpose. The reason it started to use <ng-template> instead of <template> from Angular 4 onwards is because there is a name conflict between the <template> tag and the html <template> standard tag. It will deprecate completely going ahead. This was one of the major changes made in Angular 4 version. Let us now use the template along with the if else condition and see the output. app.component.html <!–The content below is only a placeholder and can be replaced.–> <div style = “text-align:center”> <h1>Welcome to {{title}}.</h1> </div> <div> Months : <select (change) = “changemonths($event)” name = “month”> <option *ngFor = “let i of months”>{{i}}</option> </select> </div> <br/> <div> <span *ngIf = “isavailable;then condition1 else condition2”> Condition is valid. </span> <ng-template #condition1>Condition is valid from template</ng-template> <ng-template #condition2>Condition is invalid from template</ng-template> </div> <button (click) = “myClickFunction($event)”>Click Me</button> For the Span tag, we have added the if statement with the else condition and will call template condition1, else condition2. The templates are to be called as follows − <ng-template #condition1>Condition is valid from template</ng-template> <ng-template #condition2>Condition is invalid from template</ng-template> If the condition is true, then the condition1 template is called, otherwise condition2. app.component.ts import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”Angular 7”; // declared array of months. months = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”]; isavailable = false; // variable is set to true myClickFunction(event) { //just added console.log which will display the event details in browser on click of the button. alert(“Button is clicked”); console.log(event); } changemonths(event) { alert(“Changed month from the Dropdown”); } } The output in the browser is as follows − The variable isavailable is false so the condition2 template is printed. If you click the button, the respective template will be called. app.component.ts import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”Angular 7”; // declared array of months. months = [“January”, “Feburary”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”]; isavailable = false; //variable is set to true myClickFunction(event) { this.isavailable = !this.isavailable; // variable is toggled onclick of the button } changemonths(event) { alert(“Changed month from the Dropdown”); } } The isavailable variable is toggled on click of the button as shown below − myClickFunction(event) { this.isavailable = !this.isavailable; } When you click on the button based on the value of the isavailable variable the respective template will be displayed − If you inspect the browser, you will see that you never get the span tag in the dom. The following example will help you understand the same. Though in app.component.html we have added span tag and the <ng-template> for the condition as shown below − <span *ngIf = “isavailable;then condition1 else condition2”> Condition is valid. </span> <ng-template #condition1>Condition is valid from template</ng-template> <ng-template #condition2>Condition is invalid from template</ng-template> We do not see the span tag and also the <ng-template> in the dom structure when we inspect the same in browser. The following line of code in html will help us get the span tag in the dom − <!–The content below is only a placeholder and can be replaced.–> <div style = “text-align:center”> <h1> Welcome to {{title}}. </h1> </div> <div> Months : <select (change) = “changemonths($event)” name = “month”> <option *ngFor = “let i of months”>{{i}}</option> </select> </div> <br/> <div> <span *ngIf = “isavailable; else condition2”> Condition is valid. </span> <ng-template #condition1>Condition is valid from template </ng-template> <ng-template #condition2>Condition is invalid from template</ng-template> </div> <button (click) = “myClickFunction($event)”>Click Me</button> If we remove the then condition, we get the “Condition is valid” message in the browser and the span tag is also available in the dom. For example, in app.component.ts, we have made the isavailable variable as true. Print Page Previous Next Advertisements ”;

Angular7 – Components ”; Previous Next Major part of the development with Angular 7 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 And if you have selected angular routing during your project setup, files related to routing will also get added and the files are as follows − app-routing.module.ts The above files are 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 { AppRoutingModule } from ”./app-routing.module”; import { AppComponent } from ”./app.component”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], 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 with the below line of code − ng g component new-cmp When you run the above command in the command line, you will receive the following output − C:projectA7angular7-app>ng g component new-cmp CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) UPDATE src/app/app.module.ts (477 bytes) 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 { AppRoutingModule } from ”./app-routing.module”; 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, AppRoutingModule ], 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”, // selector to be used inside .html file. 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 there is 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 − <html lang = “en”> <head> <meta charset = “utf-8”> <title>Angular7App</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. We shall 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).catch(err => console.error(err)); 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 { AppRoutingModule } from ”./app-routing.module”; import { AppComponent } from ”./app.component”; import { NewCmpComponent } from ”./new-cmp/new-cmp.component”; @NgModule({ declarations: [ AppComponent, NewCmpComponent ], imports: [ BrowserModule, AppRoutingModule ” ], 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 7”; } 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