Aug
10
Angular 4 – Examples ”; Previous Next In this chapter, we will discuss a few examples related to Angular 4. To begin with, we have created an example which shows a login form with input as username and password. Upon entering the correct values, it will enter inside and show another form wherein, you can enter the customer details. In addition, we have created four components – header, footer, userlogin and mainpage. The components are created using the following command − ng g component header C:ngexamplesaexamples>ng g component header installing component create srcappheaderheader.component.css create srcappheaderheader.component.html create srcappheaderheader.component.spec.ts create srcappheaderheader.component.ts update srcappapp.module.ts ng g component footer C:ngexamplesaexamples>ng g component footer installing component create srcappfooterfooter.component.css create srcappfooterfooter.component.html create srcappfooterfooter.component.spec.ts create srcappfooterfooter.component.ts update srcappapp.module.ts ng g component userlogin C:ngexamplesaexamples>ng g component userlogin installing component create srcappuserloginuserlogin.component.css create srcappuserloginuserlogin.component.html create srcappuserloginuserlogin.component.spec.ts create srcappuserloginuserlogin.component.ts update srcappapp.module.ts ng g component mainpage C:ngexamplesaexamples>ng g component mainpage installing component create srcappmainpagemainpage.component.css create srcappmainpagemainpage.component.html create srcappmainpagemainpage.component.spec.ts create srcappmainpagemainpage.component.ts update srcappapp.module.ts In the app.module.ts, the parent module has all the components added when created. The file looks as follows − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { ReactiveFormsModule } from ”@angular/forms”; import { RouterModule, Routes} froms ”@angular/router”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import {MdTableModule} from ”@angular/material”; import {HttpModule} from “@angular/http”; import {MdInputModule} from ”@angular/material”; import { AppComponent } from ”./app.component”; import { HeaderComponent } from ”./header/header.component”; import { FooterComponent } from ”./footer/footer.component”; import { UserloginComponent } from ”./userlogin/userlogin.component”; import { MainpageComponent } from ”./mainpage/mainpage.component”; const appRoutes: Routes = [ { path: ””, component: UserloginComponent }, { path: ”app-mainpage”, component: MainpageComponent } ]; @NgModule({ declarations: [ AppComponent, HeaderComponent, FooterComponent, UserloginComponent, MainpageComponent ], imports: [ BrowserModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), BrowserAnimationsModule, HttpModule, MdTableModule, MdInputModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } The components created above are added − import { HeaderComponent } from ”./header/header.component”; import { FooterComponent } from ”./footer/footer.component”; import { UserloginComponent } from ”./userlogin/userlogin.component”; import { MainpageComponent } from ”./mainpage/mainpage.component”; The components are added in the declarations too − declarations: [ AppComponent, HeaderComponent, FooterComponent, UserloginComponent, MainpageComponent ], In the parent app.component.html, we have added the main structure of the file that will be seen by the user. <div class=”mainpage”> <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> </div> We have created a div and added <app-header></app-header>, <router-outlet></router-outlet> and <app-footer></app-footer>. The <router-outlet></router-outlet> is used for navigation between one page to another. Here, the pages are login-form and once it is successful it will redirect to the mainpage, i.e., the customer form. To get the login-form first and later get the mainpage.component.html, the changes are done in app.module.ts as shown below − import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { ReactiveFormsModule } from ”@angular/forms”; import { RouterModule, Routes} from ”@angular/router”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import {MdTableModule} from ”@angular/material”; import {HttpModule} from “@angular/http”; import {MdInputModule} from ”@angular/material”; import { AppComponent } from ”./app.component”; import { HeaderComponent } from ”./header/header.component”; import { FooterComponent } from ”./footer/footer.component”; import { UserloginComponent } from ”./userlogin/userlogin.component”; import { MainpageComponent } from ”./mainpage/mainpage.component”; const appRoutes: Routes = [ { path: ””, component: UserloginComponent }, { path: ”app-mainpage”, component: MainpageComponent } ]; @NgModule({ declarations: [ AppComponent, HeaderComponent, FooterComponent, UserloginComponent, MainpageComponent ], imports: [ BrowserModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), BrowserAnimationsModule, HttpModule, MdTableModule, MdInputModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } We have imported RouterModule and Routes from @anuglar/router. In imports, the RouterModules takes appRoutes as the param which is defined above as − const appRoutes: Routes = [ { path: ””, component: UserloginComponent }, { path: ”app-mainpage”, component: MainpageComponent } ]; Routes take the array of components and by default the userloginComponent is called. In userlogin.component.ts, we have imported the router and navigated to mainpage.component.html based on the condition as shown below − import { Component, OnInit } from ”@angular/core”; import { FormGroup, FormControl, Validators} from ”@angular/forms”; import { Router} from ”@angular/router”; @Component({ selector: ”app-userlogin”, templateUrl: ”./userlogin.component.html”, styleUrls: [”./userlogin.component.css”] }) export class UserloginComponent implements OnInit { formdata; constructor(private router: Router) { } ngOnInit() { this.formdata = new FormGroup({ uname: new FormControl(“”, Validators.compose([ Validators.required, Validators.minLength(6) ])), passwd: new FormControl(“”, this.passwordvalidation) }); } passwordvalidation(formcontrol) { if (formcontrol.value.length < 5) { return {“passwd” : true}; } } onClickSubmit(data) { console.log(data.uname); if (data.uname==”systemadmin” && data.passwd==”admin123″) { alert(“Login Successful”); this.router.navigate([”app-mainpage”]) } else { alert(“Invalid Login”); return false; } } } Following is the .ts file for app.component.ts. Only the default details are present in it. import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent {title = ”app”;} Let us now display the details of each of the components files. To start with, we will first take the header component. For the new component, four files are created header.component.ts, header.component.html, header.component.css, and header.component.spec.ts. header.component.ts import { Component, OnInit } from ”@angular/core”; @Component({ selector: ”app-header”, templateUrl: ”./header.component.html”, styleUrls: [”./header.component.css”] }) export class HeaderComponent implements OnInit { constructor() { } ngOnInit() {} } header.component.html <div> <hr /> </div> We have not added any css. This makes the header.component.css file empty. Also, the header.compoent.spec.ts file is empty as the test cases are not considered here. For the header, we will draw a horizontal line. A logo or any other detail can be added to make the header look more creative. Let us now consider creating a footer component. For the footer component, footer.component.ts, footer.component.html, footer.component.spec.ts and footer.component.css files are created. footer.component.ts import { Component, OnInit } from ”@angular/core”; @Component({ selector: ”app-footer”, templateUrl: ”./footer.component.html”, styleUrls: [”./footer.component.css”] }) export class FooterComponent implements OnInit { constructor() { } ngOnInit() { } } footer.component.html <hr/> As we have not added any css, the footer.component.css file is empty. Also, the footer.compoent.spec.ts file is empty as the test cases are not considered here. For the footer, we will just draw a horizontal line as shown in the .html file. Let us now see how the userlogin component works. The following files for userlogin component created are userlogin.component.css, userlogin.component.html, userlogin.component.ts, and userlogin.component.spec.ts. The details of the files are as follows