Angular 6 – Useful Resources ”; Previous Next The following resources contain additional information on Angular. Please use them to get more in-depth knowledge on this. Useful Video Courses Angular – The Complete Course 14 Lectures 48 mins Ganesh Kavhar More Detail Angular JS Full Stack: Create and Host Listing/Classified Site 59 Lectures 4 hours Jay R More Detail Full-Stack web app development with Angular 12, .NET Core Web API & Mongo DB Most Popular 20 Lectures 49 mins Vinay Kumar More Detail Angular 12, .NET Core Web API & Microsoft SQL Full Stack Web Development 21 Lectures 55 mins Vinay Kumar More Detail Angular 12, .NET Core Web API and MySQL Web Development 21 Lectures 51 mins Vinay Kumar More Detail Angular 12, .NET Core Web API & PostgreSQL Full Stack Web Development 5 Lectures 51 mins Vinay Kumar More Detail Print Page Previous Next Advertisements ”;
Category: angular6
Angular 6 – Discussion
Discuss Angular 6 ”; Previous Next Angular 6 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc. The code is written in TypeScript, which compiles to JavaScript and displays the same in the browser. Print Page Previous Next Advertisements ”;
Angular 6 – Pipes
Angular 6 – Pipes ”; Previous Next In this chapter, we will discuss what are Pipes in Angular 6. Pipes were earlier called filters in Angular1 and called pipes in Angular 2 onwards. The | character is used to transform data. Following is the syntax for the same {{ Welcome to Angular 6 | 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 − 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 6 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 − Angular 6 provides some built-in pipes. The pipes are listed below − 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 6 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. <!–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 { 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 ], 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> The output looks as follows − Print Page Previous Next Advertisements ”;
Angular 6 – Animations
Angular 6 – Animations ”; Previous Next Animations add a lot of interaction between the html elements. Animation was also available with Angular2. The difference with Angular 6 is that animation is no more a part of the @angular/core library, but is a separate package that needs to be imported in app.module.ts. To start with, we need to import the library as follows − import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; The BrowserAnimationsModule needs to be added to the import array in app.module.ts as shown below − app.module.ts import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import { AppComponent } from ”./app.component”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } In app.component.html, we have added the html elements, which are to be animated. <div> <button (click) = “animate()”>Click Me</button> <div [@myanimation] = “state” class = “rotate”> <img src = “assets/images/img.png” width = “100” height = “100”> </div> </div> For the main div, we have added a button and a div with an image. There is a click event for which the animate function is called. And for the div, the @myanimation directive is added and given the value as state. Let us now see the app.component.ts where the animation is defined. import { Component } from ”@angular/core”; import { trigger, state, style, transition, animate } from ”@angular/animations”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”], styles:[` div{ margin: 0 auto; text-align: center; width:200px; } .rotate{ width:100px; height:100px; border:solid 1px red; } `], animations: [ trigger(”myanimation”,[ state(”smaller”,style({ transform : ”translateY(100px)” })), state(”larger”,style({ transform : ”translateY(0px)” })), transition(”smaller <=> larger”,animate(”300ms ease-in”)) ]) ] }) export class AppComponent { state: string = “smaller”; animate() { this.state= this.state == ”larger” ? ”smaller” : ”larger”; } } We have to import the animation function that is to be used in the .ts file as shown above. import { trigger, state, style, transition, animate } from ”@angular/animations”; Here we have imported trigger, state, style, transition, and animate from @angular/animations. Now, we will add the animations property to the @Component () decorator − animations: [ trigger(”myanimation”,[ state(”smaller”,style({ transform : ”translateY(100px)” })), state(”larger”,style({ transform : ”translateY(0px)” })), transition(”smaller <=> larger”,animate(”300ms ease-in”)) ]) ] Trigger defines the start of the animation. The first param to it is the name of the animation to be given to the html tag to which the animation needs to be applied. The second param are the functions we have imported – state, transition, etc. The state function involves the animation steps, which the element will transition between. Right now we have defined two states, smaller and larger. For smaller state, we have given the style transform:translateY(100px) and transform:translateY(100px). Transition function adds animation to the html element. The first argument takes the states, i.e., start and end; the second argument accepts the animate function. The animate function allows you to define the length, delay, and easing of a transition. Let us now see the .html file to see how the transition function works <div> <button (click) = “animate()”>Click Me</button> <div [@myanimation] = “state” class=”rotate”> <img src = “assets/images/img.png” width = “100” height = “100”> </div> </div> There is a style property added in the @component directive, which centrally aligns the div. Let us consider the following example to understand the same − styles:[` div{ margin: 0 auto; text-align: center; width:200px; } .rotate{ width:100px; height:100px; border:solid 1px red; } `], Here, a special character [“] is used to add styles to the html element, if any. For the div, we have given the animation name defined in the app.component.ts file. On the click of a button it calls the animate function, which is defined in the app.component.ts file as follows − export class AppComponent { state: string = “smaller”; animate() { this.state= this.state == larger? ”smaller” : ”larger”; } } The state variable is defined and is given the default value as smaller. The animate function changes the state on click. If the state is larger, it will convert to smaller; and if smaller, it will convert to larger. This is how the output in the browser (http://localhost:4200/) will look like − Upon clicking the Click Me button, the position of the image is changed as shown in the following screenshot − The transform function is applied in the y direction, which is changed from 0 to 100px when the Click Me button is clicked. The image is stored in the assets/images folder. Print Page Previous Next Advertisements ”;
Angular 6 – Materials
Angular 6 – Materials ”; Previous Next Materials offer a lot of built-in modules for your project. Features such as autocomplete, datepicker, slider, menus, grids, and toolbar are available for use with materials in Angular 6. To use materials, we need to import the package. Angular 2 also has all the above features but they are available as part of the @angular/core module. Angular 6 has come up with a separate module @angular/materials.. This helps the user to import the required materials. To start using materials, you need to install two packages – materials and cdk. Material components depend on the animation module for advanced features, hence you need the animation package for the same, i.e., @angular/animations. The package has already been updated in the previous chapter. npm install –save @angular/material @angular/cdk Let us now see the package.json. @angular/material and @angular/cdk are installed. { “name”: “angular6-app”, “version”: “0.0.0”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { “@angular/animations”: “^6.1.0”, “@angular/cdk”: “^6.4.7”, “@angular/common”: “^6.1.0”, “@angular/compiler”: “^6.1.0”, “@angular/core”: “^6.1.0”, “@angular/forms”: “^6.1.0”, “@angular/http”: “^6.1.0”, “@angular/material”: “^6.4.7”, “@angular/platform-browser”: “^6.1.0”, “@angular/platform-browser-dynamic”: “^6.1.0”, “@angular/router”: “^6.1.0”, “core-js”: “^2.5.4”, “rxjs”: “^6.0.0”, “zone.js”: “~0.8.26” }, “devDependencies”: { “@angular-devkit/build-angular”: “~0.7.0”, “@angular/cli”: “~6.1.3”, “@angular/compiler-cli”: “^6.1.0”, “@angular/language-service”: “^6.1.0”, “@types/jasmine”: “~2.8.6”, “@types/jasminewd2”: “~2.0.3”, “@types/node”: “~8.9.4”, “codelyzer”: “~4.2.1”, “jasmine-core”: “~2.99.1”, “jasmine-spec-reporter”: “~4.2.1”, “karma”: “~1.7.1”, “karma-chrome-launcher”: “~2.2.0”, “karma-coverage-istanbul-reporter”: “~2.0.0”, “karma-jasmine”: “~1.1.1”, “karma-jasmine-html-reporter”: “^0.2.2”, “protractor”: “~5.3.0”, “ts-node”: “~5.0.1”, “tslint”: “~5.9.1”, “typescript”: “~2.7.2″ } } We have highlighted the packages that are installed to work with materials. We will now import the modules in the parent module − app.module.ts as shown below. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import { MatButtonModule, MatMenuModule, MatSidenavModule } from ”@angular/material”; import { FormsModule } from ”@angular/forms”; import { AppComponent } from ”./app.component”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule, MatMenuModule, FormsModule, MatSidenavModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } In the above file, we have imported the following modules from @angular/materials. import { MatButtonModule, MatMenuModule, MatSidenavModule } from ”@angular/material”; And the same is used in the imports array as shown below − imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule, MatMenuModule, FormsModule, MatSidenavModule ] The app.component.ts is as shown below − import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { myData: Array<any>; constructor() {} } Let us now add the material-css support in styles.css. @import “~@angular/material/prebuilt-themes/indigo-pink.css”; Let us now add the material in app.component.html. <button mat-button [matMenuTriggerFor] = “menu”>Menu</button> <mat-menu #menu = “matMenu”> <button mat-menu-item> File </button> <button mat-menu-item> Save As </button> </mat-menu> <mat-sidenav-container class = “example-container”> <mat-sidenav #sidenav class = “example-sidenav”> Angular 6 </mat-sidenav> <div class = “example-sidenav-content”> <button type = “button” mat-button (click) = “sidenav.open()”> Open sidenav </button> </div> </mat-sidenav-container> In the above file, we have added Menu and SideNav. Menu To add menu, <mat-menu></mat-menu> is used. The file and Save As items are added to the button under mat-menu. There is a main button added Menu. The reference of the same is given the <mat-menu> by using [matMenuTriggerFor]=”menu” and using the menu with # in <mat-menu>. SideNav To add sidenav, we need <mat-sidenav-container></mat-sidenav-container>. <mat-sidenav></mat-sidenav> is added as a child to the container. There is another div added, which triggers the sidenav by using (click)=”sidenav.open()”. Following is the display of the menu and the sidenav in the browser − Upon clicking opensidenav, it shows the side bar as shown below − Upon clicking Menu, you will get two items File and Save As as shown below − Let us now add a datepicker using materials. To add a datepicker, we need to import the modules required to show the datepicker. In app.module.ts, we have imported the following module as shown below for datepicker. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from ”@angular/material”; import { FormsModule } from ”@angular/forms”; import { AppComponent } from ”./app.component”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, MatDatepickerModule, MatInputModule, MatNativeDateModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Here, we have imported modules such as MatDatepickerModule, MatInputModule, and MatNativeDateModule. Now, the app.component.ts is as shown below − import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { myData: Array<any>; constructor() {} } The app.component.html is as shown below − <mat-form-field> <input matInput [matDatepicker] = “picker” placeholder = “Choose a date”> <mat-datepicker-toggle matSuffix [for] = “picker”></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> This is how the datepicker is displayed in the browser. Print Page Previous Next Advertisements ”;
Angular 6 – Http Service
Angular 6 – Http Service ”; Previous Next Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service. To start using the http service, we need to import the module in app.module.ts as shown below − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import { HttpModule } from ”@angular/http”; import { AppComponent } from ”./app.component”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } If you see the highlighted code, we have imported the HttpModule from @angular/http and the same is also added in the imports array. Let us now use the http service in the app.component.ts. import { Component } from ”@angular/core”; import { Http } from ”@angular/http”; import ”rxjs/add/operator/map”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { constructor(private http: Http) { } ngOnInit() { this.http.get(“http://jsonplaceholder.typicode.com/users”). map((response) ⇒ response.json()). subscribe((data) ⇒ console.log(data)) } } Let us understand the code highlighted above. We need to import http to make use of the service, which is done as follows − import { Http } from ”@angular/http”; In the class AppComponent, a constructor is created and the private variable http of type Http. To fetch the data, we need to use the get API available with http as follows this.http.get(); It takes the url to be fetched as the parameter as shown in the code. We will use the test url − https://jsonplaceholder.typicode.com/users to fetch the json data. Two operations are performed on the fetched url data map and subscribe. The Map method helps to convert the data to json format. To use the map, we need to import the same as shown below − import {map} from ”rxjs/operators”; Once the map is done, the subscribe will log the output in the console as shown in the browser − If you see, the json objects are displayed in the console. The objects can be displayed in the browser too. For the objects to be displayed in the browser, update the codes in app.component.html and app.component.ts as follows − import { Component } from ”@angular/core”; import { Http } from ”@angular/http”; import { map} from ”rxjs/operators”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { constructor(private http: Http) { } httpdata; ngOnInit() { this.http.get(“http://jsonplaceholder.typicode.com/users”) .pipe(map((response) => response.json())) .subscribe((data) => this.displaydata(data)); } displaydata(data) {this.httpdata = data;} } In app.component.ts, using the subscribe method we will call the display data method and pass the data fetched as the parameter to it. In the display data method, we will store the data in a variable httpdata. The data is displayed in the browser using for over this httpdata variable, which is done in the app.component.html file. <ul *ngFor = “let data of httpdata”> <li>Name : {{data.name}} Address: {{data.address.city}}</li> </ul> The json object is as follows − { “id”: 1, “name”: “Leanne Graham”, “username”: “Bret”, “email”: “Sincere@april.biz”, “address”: { “street”: “Kulas Light”, “suite”: “Apt. 556”, “city”: “Gwenborough”, “zipcode”: “92998-3874”, “geo”: { “lat”: “-37.3159”, “lng”: “81.1496” } }, “phone”: “1-770-736-8031 x56442”, “website”: “hildegard.org”, “company”: { “name”: “Romaguera-Crona”, “catchPhrase”: “Multi-layered client-server neural-net”, “bs”: “harness real-time e-markets” } } The object has properties such as id, name, username, email, and address that internally has street, city, etc. and other details related to phone, website, and company. Using the for loop, we will display the name and the city details in the browser as shown in the app.component.html file. This is how the display is shown in the browser − Let us now add the search parameter, which will filter based on specific data. We need to fetch the data based on the search param passed. Following are the changes done in app.component.html and app.component.ts files − app.component.ts import { Component } from ”@angular/core”; import { Http } from ”@angular/http”; import { map} from ”rxjs/operators”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { constructor(private http: Http) { } httpdata; name; searchparam = 2; ngOnInit() { this.http.get(“http://jsonplaceholder.typicode.com/users?id=”+this.searchparam) .pipe(map((response) => response.json())) .subscribe((data) => this.displaydata(data)); } displaydata(data) {this.httpdata = data;} } For the get api, we will add the search param id = this.searchparam. The searchparam is equal to 2. We need the details of id = 2 from the json file. This is how the browser is displayed − We have consoled the data in the browser, which is received from the http. The same is displayed in the browser console. The name from the json with id = 2 is displayed in the browser. Print Page Previous Next Advertisements ”;
Angular 6 – Routing
Angular 6 – Routing ”; Previous Next Routing basically means navigating between pages. You have seen many sites with links that direct you to a new page. This can be achieved using routing. Here the pages that we are referring to will be in the form of components. We have already seen how to create a component. Let us now create a component and see how to use routing with it. In the main parent component app.module.ts, we have to now include the router module as shown below − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { RouterModule} from ”@angular/router”; 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, RouterModule.forRoot([ { path: ”new-cmp”, component: NewCmpComponent } ]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } import { RouterModule} from ”@angular/router” Here, the RouterModule is imported from angular/router. The module is included in the imports as shown below − RouterModule.forRoot([ { path: ”new-cmp”, component: NewCmpComponent } ]) RouterModule refers to the forRoot which takes an input as an array, which in turn has the object of the path and the component. Path is the name of the router and component is the name of the class, i.e., the component created. Let us now see the component created file − New-cmp.component.ts import { Component, OnInit } from ”@angular/core”; @Component({ selector: ”app-new-cmp”, templateUrl: ”./new-cmp.component.html”, styleUrls: [”./new-cmp.component.css”] }) export class NewCmpComponent implements OnInit { newcomponent = “Entered in new component created”; constructor() {} ngOnInit() { } } The highlighted class is mentioned in the imports of the main module. New-cmp.component.html <p> {{newcomponent}} </p> <p> new-cmp works! </p> Now, we need the above content from the html file to be displayed whenever required or clicked from the main module. For this, we need to add the router details in the app.component.html. <h1>Custom Pipe</h1> <b>Square root of 25 is: {{25 | sqrt}}</b><br/> <b>Square root of 729 is: {{729 | sqrt}}</b> <br /> <br /> <br /> <a routerLink = “new-cmp”>New component</a> <br /> <br/> <router-outlet></router-outlet> In the above code, we have created the anchor link tag and given routerLink as “new-cmp”. This is referred in app.module.ts as the path. When a user clicks new component, the page should display the content. For this, we need the following tag – <router-outlet> </router-outlet>. The above tag ensures that the content in the new-cmp.component.html will be displayed on the page when a user clicks new component. Let us now see how the output is displayed on the browser. When a user clicks New component, you will see the following in the browser. The url contains http://localhost:4200/new-cmp. Here, the new-cmp gets appended to the original url, which is the path given in the app.module.ts and the router-link in the app.component.html. When a user clicks New component, the page is not refreshed and the contents are shown to the user without any reloading. Only a particular piece of the site code will be reloaded when clicked. This feature helps when we have heavy content on the page and needs to be loaded based on the user interaction. The feature also gives a good user experience as the page is not reloaded. Print Page Previous Next Advertisements ”;
Angular 6 – CLI
Angular 6 – CLI ”; Previous Next Angular CLI makes it easy to start with any Angular project. Angular CLI comes with commands that help us create and start on our project very fast. Let us now go through the commands available to create a project, a component and services, change the port, etc. To work with Angular CLI, we need to have it installed on our system. Let us use the following command for the same − npm install -g @angular/cli To create a new project, we can run the following command in the command line and the project will be created. ng new PROJECT-NAME cd PROJECT-NAME ng serve // ng serve // will compile and you can see the output of your project in the browser − http://localhost:4200/ 4200 is the default port used when a new project is created. You can change the port with the following command − ng serve –host 0.0.0.0 –port 4201 The following table lists down a few important commands required while working with Angular 4 projects. Component ng g component new-component Directive ng g directive new-directive Pipe ng g pipe new-pipe Service ng g service new-service Module ng g module my-module Whenever a new module, a component, or a service is created, the reference of the same is updated in the parent module app.module.ts. Print Page Previous Next Advertisements ”;
Angular 6 – Templates
Angular 6 – Templates ”; Previous Next Angular 6 uses the <ng-template> as the tag similar to Angular 4 instead of <template> which is used in Angular2. The reason Angular 4 changed <template> to <ng-template> is because there is a name conflict between the <template> tag and the html <template> standard tag. It will deprecate completely going ahead. 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 6 Project!”; //array of months. months = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”]; isavailable = false; myClickFunction(event) { this.isavailable = false; } changemonths(event) { alert(“Changed month from the Dropdown”); console.log(event); } } 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. 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. If you inspect the browser, you will see that the dom does not have the span tag. It has the Condition is invalid from template in the dom. 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 Print Page Previous Next Advertisements ”;
Angular 6 – Quick Guide
Angular 6 – Quick Guide ”; Previous Next Angular 6 – Overview There are five major releases of Angular. The first version that was released is Angular 1, which is also called AngularJS. Angular 1 was followed by Angular 2, which came in with a lot of changes when compared to Angular 1. The structure of Angular is based on the components/services architecture. AngularJS was based on the model view controller. Angular 6 released in May 2018 proves to be a major breakthrough and is the latest release from the Angular team after Angular 5. Angular 6 is almost the same as Angular 5. It has a backward compatibility with Angular 5. Projects developed in Angular 5 will work without any issues with Angular 5. Let us now see the new features and the changes made in Angular 5. Angular 5 and its Features Angular 5 was released in Nov 2017. As per its goal of speed and size, It was way faster and of smaller size than that of Angular 4. Following are the features that were introduced in Angular 5. HTTPClient API − HTTPClient API was introduced to deprecate the HTTP library. HTTPClient API is much faster, secure and efficient than HTTP library. Multiple export aliases − A component can be exported using multiple aliases to ease the migration process. Internationalized Pipes for Number, Date, and Currency − New pipes are introduced for better standardization. Lambda support − lambda expressions with proper names can be used instead of functions. Build Optimizer – Build Optimizer introduced. It optimizes the build size and improves the application speed. Angular CLI uses Build Optimizer automatically. Improved Compiler − Compiler from Angular 5 onwards supports incremental compilation leading for faster compilation. Compiler uses TypeScript transforms, a new feature of TypeScript 2.3 available onwards. Let us now see the new features added to Angular 6 − Updated Angular CLI, Command Line interface − New commands added, like ng-update to migrate from previous version to current version. ng-add to quickly add application features to make application a progressive web apps. Updated CDK, Component Development Kit − Supports creating custom UI elements without need of angular material library. Supports responsive web design layouts. Supports overlay packages to create pop-ups. Updated Angular Material − New Tree component added, mat-tree, a styled version and cdk-tree, a unstyled version, to represent a hierarchical structure like tree. Usage of RxJS, a reactive JS library Angular Element − Allows Angular Components to be published as Web Components which can then be used in any HTML page. Using Angular Element package, native custom elements can be created easily. Multiple Validators − Allows multiple validators to be applicable on a form builder. Tree Shaking on Services − Now tree shaking can be applied on services as well to remove the dead code. Angular 6 – Environment Setup In this chapter, we will discuss the Environment Setup required for Angular 6. To install Angular 6, we require the following − Nodejs Npm Angular CLI IDE for writing your code Nodejs has to be greater than 8.11 and npm has to be greater than 5.6. Nodejs To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system. C:>node -v v8.11.3 If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS. The homepage of nodejs will look like the following − Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm. C:>npm -v 5.6.0 Angular 4 installations are very simple with the help of angular CLI. Visit the homepage https://cli.angular.io/ of angular to get the reference of the command. Type npm install -g @angular/cli, to install angular cli on your system. You will get the above installation in your terminal, once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc. The details of the project setup is explained in the next chapter. Angular 6 – Project Setup AngularJS is based on the model view controller, whereas Angular 4 is based on the components structure. Angular 6 works on the same structure as Angular4 but is faster when compared to Angular4. Angular6 uses TypeScript 2.9 version whereas Angular 4 uses TypeScript version 2.2. This brings a lot of difference in the performance. To install Angular 6, the Angular team came up with Angular CLI which eases the installation. You need to run through a few commands to install Angular 6. Go to this site https://cli.angular.io to install Angular CLI. To get started with the installation, we first need to make sure we have nodejs and npm installed with the latest version. The npm package gets installed along with nodejs. Go to the nodejs site https://nodejs.org/en/. The latest version of Nodejs v8.11.3 is recommended for users. Users who already have nodejs greater than 8.11 can skip the above process. Once nodejs is installed, you can check the version of node in the command line using the command, node -v, as shown below − node -v v8.11.3 The command prompt shows v8.11.3. Once nodejs is installed, npm will also get installed along with it. To check the version of npm, type command npm -v in the terminal. It will display the version of npm as shown below. npm -v v5.6.0 The version of npm is 5.6.0. Now that we have nodejs and npm installed, let us run the angular cli commands to install Angular 6. You will see the following commands on the webpage − npm install -g @angular/cli //command to install angular 6 ng new Angular 6-app // name of the project cd my-dream-app ng serve