Angular 6 CRUD Application

1. Angular CLI Useful Commands
1. ng g component my-new-component
2. ng g directive my-new-directive
3. ng g pipe my-new-pipe
4. ng g service my-new-service
5. ng g class my-new-class
6. ng g guard my-new-guard
7. ng g interface my-new-interface
8. ng g enum my-new-enum
9. ng g module my-module
2. Create components. Template, component and js file will be generated with this and Module will be added to @ngModule decorations decalarion part of app.module.ts.
1. ng g component login ng g component add-user ng g component edit-user ng g component list-user
2. app.module.ts
3. import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from "./login/login.component"; import { AddUserComponent } from "./add-user/add-user.component"; import { EditUserComponent } from "./edit-user/edit-user.component"; import { ListUserComponent } from "./list-user/list-user.component"; const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'add-user', component: AddUserComponent }, { path: 'edit-user', component: EditUserComponent }, { path: 'list-user', component: ListUserComponent }, { path: '', component: LoginComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
4. 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
5. app.routing.ts
6. import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from "./login/login.component"; import { AddUserComponent } from "./add-user/add-user.component"; import { EditUserComponent } from "./edit-user/edit-user.component"; import { ListUserComponent } from "./list-user/list-user.component"; const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'add-user', component: AddUserComponent }, { path: 'edit-user', component: EditUserComponent }, { path: 'list-user', component: ListUserComponent }, { path: '', component: LoginComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
3. Create model user.model.ts
1. ng g class model/User
2.  user.model.ts
3. export class User { id: number; firstName: string; lastName: string; email: string; }
4. Create Service service/user.service.ts
1. ng g service service/UserService
2. We can make web api call using HttpClent package in service class by the use of model User
3. user.service.ts 
4. import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { User } from '../model/user'; @Injectable({ providedIn: 'root' }) export class UserServiceService { constructor(private http: HttpClient) { } baseUrl: string = 'http://localhost:8080/user-portal/users'; getUsers() { return this.http.get(this.baseUrl); } getUserById(id: number) { return this.http.get(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); } }
5. Edit Html and component class to make the application
1. add-user.component.html
6. 2.    add-user.component.ts
1. 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']); }); } }
7. Adding Materials
1. 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.