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.

Continue Reading

Angular6 Routing

• To generate new component employee. Go to app root in CLI and run below command
• ng g c employee/create-employee --spec=false --flat=true ng g c employee/list-employees --spec=false --flat=true
• component.ts, html and css files will be genarated in employee folder in app and it will add List Employee and Create Employee components in app.module.ts as below
• app.module.ts
• import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CreateEmployeeComponent } from './employee/create-employee.component'; import { ListEmployeesComponent } from './employee/list-employees.component'; @NgModule({ declarations: [ AppComponent, CreateEmployeeComponent, ListEmployeesComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
• Generate routing module to app. It will create app-routing.module.ts file and add Routing  to app.module.ts
• ng g m app-routing --flat=true --module=app
• Inside app-routing.module.ts, add  RouterModule object and call forRoot Method as below.
• import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ListEmployeesComponent } from './employee/list-employees.component'; import { CreateEmployeeComponent } from './employee/create-employee.component'; const routes: Routes = [ {path: 'list', component: ListEmployeesComponent}, {path: 'create', component: CreateEmployeeComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
• Go to app.component.html and add new routes using routerLink tag

• 
  

Continue Reading