Getting Started Build Angular 6 Web Application step by step

-
In this article we will be building an Angular 6 application step by step from scratch with sample example. We will be generating our Angular 6 hello world application using angular CLI and then modify it to have a user management project where there will be a login screen for an admin and post login he can perform CRUD operations such as create, read, update and delete user with the sample REST API exposed using HttpClientModule. We will also be using RouterModule to have routing enabled. Also, at the end we will be integrating material designing with our Angular 6 app.

Table of Contents 
 
1. Angular 6 Highlights 
2. Generating Angular 6 Project
3. Angular 6 Project Structure
4. Angular CLI Useful Commands
5. Angular 6 Routing
6. Spring Boot Implementation
7. Service in Angular 6 Application
8. Creating Components in Angular 6
9. Testing Angular 6 Application
10. Adding Material Design in Angular 6 App

Angular 6 Release Highlights

Angular v6 is the first release of Angular that unifies the Framework, Material and CLI. @angular/core now depends on.
  • TypeScript 2.7
  • RxJS 6.0.0
  • tslib 1.9.0
Both the CLI and generated project have dependencies that require Node 8.9 or higher, together with NPM 5.5.1 or higher. For this project, I have npm 5.6.0 and node v8.11.2 installed on my local system. You can download the latest version of Node js from here - Node Js Official. To update NPM, you can run the following command in the terminal.

npm i npm@latest -g
 
If u have an @angular/cli version older then 6, then run following command to install the latest versions:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli
 
To install a specific version, you can use npm install -g @angular/cli@1.4.9
For a complete change log, you can visit here.

Generating Angular 6 Project

Once, the npm and node is upgraded to the latest version, you can run following command to generate angular 6 project in any location of your choice.
ng new angular6-example
Doing so, our angular 6 application is generated with TypeScript 2.7 & RxJS 6.RxJS 6 contains some breaking changes and hence a new package, rxjs-compat, can be installed alongside RxJS 6 to provide a compatibility layer while upgrading your code to the new syntax.

Angular 6 Project Structure

Once the project is generated, you can import it in your favourite directory and get started with it. Following will be the final structure of our project. Also, you can run following commands to see angular 6 app running at localhost:4200

cd angular6-example
ng serve
 
angular-6-project-strct
There are certain files generated with CLI command which we need to understand here. We have angular.json file generated that has all the application configuration parameters. The configuration related to welcome html file as index.html, main.ts where all the modules are bundled. You can also find the final application output directory configuration and configuration specific to environment such as dev and prod can be found here.
We have package.json file that has information about all the project dependencies. We have tsconfig.json for typescript configuration.Inside the scr/app folder we have our components defined and when the request for localhost:4200 is made, AppComponent is loaded in the browser.
As discussed above, we will have multiple components such as login and add-user, edit-user, create-user. Once an admin login sucessfully, he can perform user CRUD operation.Following are the commands to generate our components.

ng g component login
ng g component add-user
ng g component edit-user
ng g component list-user

Angular CLI Useful Commands

ng g component my-new-component
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g guard my-new-guard
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module

Angular 6 Routing

Following is our routing configurtion.We have configured to use LoginComponent as a default component.Also, do not forget to include it in the main module - app.module.ts
app.routing.ts

import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from "./login/login.component";
import {AddUserComponent} from "./add-user/add-user.component";
import {ListUserComponent} from "./list-user/list-user.component";
import {EditUserComponent} from "./edit-user/edit-user.component";

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'add-user', component: AddUserComponent },
  { path: 'list-user', component: ListUserComponent },
  { path: 'edit-user', component: EditUserComponent },
  {path : '', component : LoginComponent}
];

export const routing = RouterModule.forRoot(routes);
The AuthenticationService here is just a placeholder because we have actually hard-coded the username and pasword in login component.

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import {routing} from "./app.routing";
import {AuthenticationService} from "./service/auth.service";
import {ReactiveFormsModule} from "@angular/forms";
import {HttpClientModule} from "@angular/common/http";
import { AddUserComponent } from './add-user/add-user.component';
import { EditUserComponent } from './edit-user/edit-user.component';
import {ListUserComponent} from "./list-user/list-user.component";
import {UserService} from "./service/user.service";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ListUserComponent,
    AddUserComponent,
    EditUserComponent
  ],
  imports: [
    BrowserModule,
    routing,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [AuthenticationService, UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Service in Angular 6 Application

Following is the implementation of our UserService. It has all the API details that is required for the CRUD operation.Also, for testing purpose, you can use following fake users.

let fakeUsers = [{id: 1, firstName: 'Dhiraj', lastName: 'Ray', email: 'dhiraj@gmail.com'},
      {id: 1, firstName: 'Tom', lastName: 'Jac', email: 'Tom@gmail.com'},
      {id: 1, firstName: 'Hary', lastName: 'Pan', email: 'hary@gmail.com'},
      {id: 1, firstName: 'praks', lastName: 'pb', email: 'praks@gmail.com'},
    ];
    return Observable.of(fakeUsers).delay(5000);
user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {User} from "../model/user.model";

@Injectable()
export class UserService {
  constructor(private http: HttpClient) { }
  baseUrl: string = 'http://localhost:8080/user-portal/users';

  getUsers() {
    return this.http.get<User[]>(this.baseUrl);
  }

  getUserById(id: number) {
    return this.http.get<User>(this.baseUrl + '/' + id);
  }

  createUser(user: User) {
    return this.http.post(this.baseUrl, user);
  }

  updateUser(user: User) {
    return this.http.put(this.baseUrl + '/' + user.id, user);
  }

  deleteUser(id: number) {
    return this.http.delete(this.baseUrl + '/' + id);
  }
}

Creating Components in Angular 6

We will have a login component. After successfull login, user will be redirected to list page and from there the user can perform crud operation. So, let us first start creating LoginComponent. To protect the website from spam and abuse, it is recommended to use captcha.

login.component.html
<div class="row">

  <div class="col-md-6 col-md-offset-2">
    <h1>Login </h1>
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" formControlName="email" id="email">
        <div *ngIf="submitted && loginForm.controls.email.errors" class="error">
          <div *ngIf="loginForm.controls.email.errors.required">Email is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" formControlName="password" id="pwd">
        <div *ngIf="submitted && loginForm.controls.password.errors" class="error">
          <div *ngIf="loginForm.controls.password.errors.required">Password is required</div>
        </div>
      </div>
      <button class="btn btn-default">Login</button>
      <div *ngIf="invalidLogin" class="error">
        <div>Invalid credentials.</div>
      </div>
    </form>
  </div>
</div>
login.component.ts
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Router} from "@angular/router";
import {first} from "rxjs/operators";
import {AuthenticationService} from "../service/auth.service";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;
  submitted: boolean = false;
  invalidLogin: boolean = false;
  constructor(private formBuilder: FormBuilder, private router: Router, private authService: AuthenticationService) { }

  onSubmit() {
    this.submitted = true;
    if (this.loginForm.invalid) {
      return;
    }
    if(this.loginForm.controls.email.value == 'dhiraj@gmail.com' && this.loginForm.controls.password.value == 'password') {
        this.router.navigate(['list-user']);
    }else {
      this.invalidLogin = true;
    }
  }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }



}
Following is list-user.component.html.
<div class="col-md-6">
  <h2> User Details</h2>
  <button class="btn btn-danger" (click)="addUser()"> Add User</button>
  <table class="table table-striped">
    <thead>
    <tr>
      <th class="hidden">Id</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of users">
      <td class="hidden"></td>
      <td></td>
      <td></td>
      <td></td>
      <td><button class="btn btn-danger" (click)="deleteUser(user)"> Delete</button>
        <button class="btn btn-danger" (click)="editUser(user)" style="margin-left: 20px;"> Edit</button></td>
    </tr>
    </tbody>
  </table>
</div>
list-user.component.ts
import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {UserService} from "../service/user.service";
import {User} from "../model/user.model";

@Component({
  selector: 'app-list-user',
  templateUrl: './list-user.component.html',
  styleUrls: ['./list-user.component.css']
})
export class ListUserComponent implements OnInit {

  users: User[];

  constructor(private router: Router, private userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers()
      .subscribe( data => {
        this.users = data;
      });
  }

  deleteUser(user: User): void {
    this.userService.deleteUser(user.id)
      .subscribe( data => {
        this.users = this.users.filter(u => u !== user);
      })
  };

  editUser(user: User): void {
    localStorage.removeItem("editUserId");
    localStorage.setItem("editUserId", user.id.toString());
    this.router.navigate(['edit-user']);
  };

  addUser(): void {
    this.router.navigate(['add-user']);
  };
}
add-user.component.html
<div class="col-md-6">
  <h2 class="text-center">Add User</h2>
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="email">Email address:</label>
      <input type="email" formControlName="email" placeholder="Email" name="email" class="form-control" id="email">
    </div>

    <div class="form-group">
      <label for="firstName">First Name:</label>
      <input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">
    </div>

    <div class="form-group">
      <label for="lastName">Last Name:</label>
      <input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">
    </div>

    <button class="btn btn-success">Update</button>
  </form>
</div>
add-user.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {UserService} from "../service/user.service";
import {first} from "rxjs/operators";
import {Router} from "@angular/router";

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css']
})
export class AddUserComponent implements OnInit {

  constructor(private formBuilder: FormBuilder,private router: Router, private userService: UserService) { }

  addForm: FormGroup;

  ngOnInit() {

    this.addForm = this.formBuilder.group({
      id: [],
      email: ['', Validators.required],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });

  }

  onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
      });
  }

}
edit-user.component.html
<div class="col-md-6">
  <h2 class="text-center">Edit User</h2>
  <form [formGroup]="editForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="email">Email address:</label>
      <input type="email" formControlName="email" placeholder="Email" name="email" class="form-control" id="email">
    </div>

    <div class="form-group">
      <label for="firstName">First Name:</label>
      <input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">
    </div>

    <div class="form-group">
      <label for="lastName">Last Name:</label>
      <input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">
    </div>

    <button class="btn btn-success">Update</button>
  </form>
</div>
edit-user.component.ts
import { Component, OnInit } from '@angular/core';
import {UserService} from "../service/user.service";
import {Router} from "@angular/router";
import {User} from "../model/user.model";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {first} from "rxjs/operators";

@Component({
  selector: 'app-edit-user',
  templateUrl: './edit-user.component.html',
  styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {

  user: User;
  editForm: FormGroup;
  constructor(private formBuilder: FormBuilder,private router: Router, private userService: UserService) { }

  ngOnInit() {
    let userId = localStorage.getItem("editUserId");
    if(!userId) {
      alert("Invalid action.")
      this.router.navigate(['list-user']);
      return;
    }
    this.editForm = this.formBuilder.group({
      id: [],
      email: ['', Validators.required],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });
    this.userService.getUserById(+userId)
      .subscribe( data => {
        this.editForm.setValue(data);
      });
  }

  onSubmit() {
    this.userService.updateUser(this.editForm.value)
      .pipe(first())
      .subscribe(
        data => {
          this.router.navigate(['list-user']);
        },
        error => {
          alert(error);
        });
  }

}

Testing Angular 6 Application

Once our API is deployed, we can simply traverse to the client project and run the command ng serve and hit localhost:4200

angular-6-login-page
After login, you can see following screen with list of users. On this page, you can perform actions to add, edit and delete user. Following is a sample screen for edit user.
angular-6-list-page
angular-6-edit-page

Adding Material Design in Angular 6 App

With the release of Angular 6, we can directly run ng add @angular/material command to add material design capabilities to an existing Angular application. By executing below command we will be installing Angular Material and the corresponding theming into the project.
Here, we will be only integrating material designing with Angular 6. Here is my another article, where we have intgegrated SideNav with Angular 6 Material

ng add @angular/material
 
But in our existing project, we have included bootstrap 4 earlier to provide some styling and hence let us remove it first. To so so, open index.html and remove below scripts.

<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
 
Once, these scripts are removed, run above CLI command.
Now, we will create a new module with file name material.module.ts and import all the material design related module here and import it into our app.module.ts file.

material.module.ts

import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatButtonModule, MatCardModule, MatDialogModule, MatInputModule, MatTableModule,
  MatToolbarModule
} from '@angular/material';

@NgModule({
  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatCardModule, MatInputModule, MatDialogModule, MatTableModule],
  exports: [CommonModule, MatToolbarModule, MatButtonModule, MatCardModule, MatInputModule, MatDialogModule, MatTableModule],
})
export class CustomMaterialModule { }
Doing so will definitely not add any material styling to our html pages. To achieve this, we require to re-write our html pages using material directives. Here, I am going to change only the login.component.html for demo purpose.

login.component.html
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span><img src="./assets/devglan.png"></span>
    <span class="example-fill-remaining-space"></span>
    <span class="example-spacer"></span>

    <button mat-button>About</button>
    <button mat-button>Contact</button>
  </mat-toolbar-row>
</mat-toolbar>

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Login</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput placeholder="Username" formControlName="email" name="username" required>
              <mat-error *ngIf="loginForm.controls.email.errors.required">Password is required</mat-error>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td><mat-form-field class="example-full-width">
            <input matInput placeholder="Password" formControlName="password" type="password" name="password" required>
            <mat-error *ngIf="loginForm.controls.password.errors.required">Email is required</mat-error>
          </mat-form-field></td>
        </tr></table>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary">Login</button>
  </mat-card-actions>
</mat-card>
Now, you can compare the difference between our previous and present(material designing) login page styling. You can download the source from github here.


Conclusion

In this article, we learned about Angular 6 and created a sample example project using it. The source can be downloaded from github here - Angular 6 Example

Comments

Post a Comment

Popular posts from this blog

Restore the lost focus of Auto post back controls in asp.net update Panel control

-
Problem: We put  autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details  the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times. Solution: Step 1: Save following in js file give any name to it (like MyUpdatePanelFocus.js ) var lastFocusedControlId = ""; function focusHandler(e) { document.activeElement = e.originalTarget; } function appInit() { if (typeof (window.addEventListener) !== "undefined") { window.addEventListener("focus", focusHandler, true); } Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler); Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); } function pageLoadingHandler(sender, args) { lastFocusedControlId = typeof (document.acti
Read more

Clone a generic list in C# using extension method

-
In practical situation you need to clone of object so that change in cloned object will not affect the original one. If you need a cloned list with the same capacity you need to do some extra stuff with your user type. I came up with this easy solution using ICloneable interface in your custom type class. The first step you need to implement the ICloneable interface in your class like below. public class MyClassDto : ICloneable { public Int64 Id { get; set; } public string Time { get; set; } public int user{ get; set; } public object Clone() { return new MyClassDto{ Date = this.Date, Id = this.Id, user = this.user}; } } after that you need to add extension method in common class so that you can use it everywhere you want. public static class Extensions { public static List<T> Clone<T>(this List<T> listToClone) where T : ICloneable { return listToClone.Select(item
Read more

Disable backspace key using Jquery

-
Disable backspace key in HTML form using Jquery in simple steps. While user enters data into application if user accidentally  press backspace button then it will redirect to previous page and all entered data would be lost. to eliminate this event we can disable the backspace key using Jquery. Following is the JQuery script tag you can add to the web page $(document).keydown(function (e) { var nodeName = e.target.nodeName.toLowerCase(); if (e.which === 8) { if ((nodeName === 'input' && e.target.type === 'text') || nodeName === 'textarea') { // do nothing } else { e.preventDefault(); } } }); The above code can be used seamlessly with any web technology you are using. Hope this will help you in your web application. Happy coding:)
Read more

Add Comma automatically while entering amounts in textbox using Javascript

-
Use following javascript function to add comma in numerics input in textbox function Comma(Num) { Num += ''; Num = Num.replace(/,/g, ''); x = Num.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d)((\d)(\d{2}?)+)$/; while (rgx.test(x1)) x1 = x1.replace(rgx, '$1' + ',' + '$2'); return x1 + x2; } Use following event of input textbox to call above function onkeyup = "javascript:this.value=Comma(this.value);"
Read more

Step by step migration of ASP.NET Core 2.2 to 3.1

-
In order to upgrade/migrate asp.net core version to 3.1 following steps to be perform. Download and install Visual Studio 2019 version 16.4 or higher. Download and install .NET Core 3.1  https://dotnet.microsoft.com/download/dotnet-core/3.1 Upgrade the projects of solution to .NET Core 3.1 , because ASP.NET Core 3.1 requires it. Update existing Nuget packages to a version compatible with ASP.NET Core 3.1 in each project Use IHost interface from a IHostBuilder instead of building and running a IWebHost from a IWebHostBuilder in Program.cs public static IHostBuilder CreateWebHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseKestrel() .UseSerilog() .UseStartup<Startup>(); }) Change AddMvc method has been replaced by AddControllers in Startup.cs of each projects. In Startup.cs, UseMvc method to b
Read more

Source Code Beautifier And Format Source Code For Blogger and Websites

-
Source Code Beautifier And Formatter For Blogger and Websites, Format Source Code , Format Source code for blog or blogging & website, Online line source code formatter tool, blogger code format tool, Format source code for blog-spot,Insert formatted source code How to format source code for blogger & website :   You can format your source code for blogger & website in easy three steps.. 1) Paste your source code into "Paste Here Your Source Code" Text-area. 2) Choose appropriate options from "formatting options" and click Format Source Code button.. 3) See preview of formatted source code if it's fine then copy from "Copy Formatted Source Code" text-area otherwise repeat step 2  This source code formatter allow you to format code like JavaScript, HTML, CSS, C#, PHP, ASP.net, VB.Net, Visual Basic, DOT.net, ASP & many other languages.  It does not add unnecessary tags into formatted code, It use only two t
Read more

Remove Owin from MVC 5 Application and use asp.net custom forms authentication

-
Image
Owin comes with 15 other dependencies when we add default "blank" mvc5 template in solution. Which some time is irrelevant to web application hence needs to be removed for adding custom authentication techniques in the web application. Remove the owin  from solution is tedious task but if we follow the below procedure then it can be easily removed from the solution. Right click on your project and from menu click on Manage Nuget Packages. on left side of Manage Nuget Packages window click on Installed Package then on right side of window in search box type owin.  Uninstall packages in order of: microsoft.aspnet.identity.owin microsoft.owin.host.systemweb microsoft.owin.security.cookies microsoft.owin.security.facebook microsoft.owin.security.google microsoft.owin.security.microsoftaccount microsoft.owin.security.twitter microsoft.aspnet.identity.entityframework microsoft.aspnet.identity.core Open web.config file and remove these sections from   &l
Read more

How to Import CSV File and bind csv file data to gridview in asp.net using c#

-
I am going to demonstrate in this article about importing CSV file data into datatable and then bind that data to Asp.net gridview control. i have tried to make code simpler and less line of code. I am assuming that you have saved the csv file to server by using fileupload control. After that create function which returns string[] private IEnumerable<string[]> GetAllDataFromCSVFile(string FileName) { string str; using (StreamReader rd=new StreamReader(FileName)) { while ((str = rd.ReadLine()) != null) { yield return str.Split(','); } } } Create another function which returns final data-table with CSV File data private DataTable GetCSVData(string FileName) { var values = GetAllDataFromCSVFile(FileName); DataTable dt = new DataTable(); int j=0; foreach (var i
Read more

Email validation using regular expression in jQuery

-
To validate user input for email-id it's very easy using regular expressions. Using regular expressions you do not need to write lengthy logical code in jQuery. Following are the steps to do the same. Pass a string to RegExp or create a regex using the  // syntax Call  regex.test(string) So code would be... jQuery ( function () { $ ( ".mail" ). keyup ( function () { var VAL = this . value ; var email = new RegExp ( '^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$' ); if ( email . test ( VAL )) { alert ( 'Great, you entered an valid E-Mail-address' ); } }); });
Read more