Introduction

In the previous article, we have created a Web API and connected that with DB. Also, we have secured the Web API using the OAuth2.0 technique. Now, in this part, we will consume that API using an Angular app in the front-end.
The complete project code is given at this link below.

How will it work?

First of all, we have to configure the environment to start development in Angular. I hope you already configured the environment. Please download the latest version of NodeJS. I’m using Visual Studio Code as my code editor but you can choose any other or this one. So, let’s create an Angular app using Angular CLI.
Open Visual Studio Code terminal or command prompt and run through the following steps.
Step 1
Create an Angular project. Open cmd or VS Code terminal and type the command - ng new AngularAuth
Angular 8 CRUD With Oauth2.0 In WebAPI
Step 2
Type (Y) to add routing module
Angular 8 CRUD With Oauth2.0 In WebAPI
Step 3
Choose stylesheet type
Angular 8 CRUD With Oauth2.0 In WebAPI
Step 4
Now our project is created successfully now let’s run the project. Type the command,
cd AngularCRUD
ng serve –open
Angular 8 CRUD With Oauth2.0 In WebAPI
The Browser will display this page which means the project created and ran successfully.
Angular 8 CRUD With Oauth2.0 In WebAPI
Step 5
Let’s create a DTO class ProductDTO.ts
Angular 8 CRUD With Oauth2.0 In WebAPI
ProductDTO.ts
  1. export class ProductDTO{
  2. ID: string;
  3. Name: string;
  4. Price: string;
  5. }
Step 6
Let’s create a service class for communication with the database.
Type the command: ng g service Product.
Angular 8 CRUD With Oauth2.0 In WebAPI
ProductService.ts
  1. import { Injectable } from '@angular/core';
  2. import {HttpClient,HttpHeaders} from '@angular/common/http';
  3. import { ProductDTO } from '../app/ProductDTO';
  4. import { Observable } from 'rxjs';
  5. @Injectable({
  6. providedIn: 'root'
  7. })
  8. export class ProductService {
  9. ApiUrl='http://localhost:57046/';
  10. constructor(private httpclient: HttpClient) { }
  12. GetProducts():Observable<ProductDTO[]>{
  13. return this.httpclient.get<ProductDTO[]>(this.ApiUrl+'Api/Product/GetProducts');
  14. }
  16. GetProductById(Id:string):Observable<ProductDTO>{
  17. return this.httpclient.get<ProductDTO>(this.ApiUrl+'Api/Product/GetProductById/'+Id);
  18. }
  19. InsertProduct(product:ProductDTO){
  20. return this.httpclient.post<ProductDTO>(this.ApiUrl+'Api/Product/InsertProduct',product);
  21. }
  23. UpdateProduct(product:ProductDTO):Observable<ProductDTO>{
  24. return this.httpclient.put<ProductDTO>(this.ApiUrl+'Api/Product/Updateproduct/',product);
  25. }
  27. DeleteProduct(Id:string){
  28. return this.httpclient.delete(this.ApiUrl+'Api/Product/DeleteProduct/'+Id);
  29. }
  31. UserAuthentication(UserName: string,Password: string):Observable<any>{
  32. let credentials='username=' +UserName + '&password=' +Password +'&grant_type=password';
  33. var reqHeader = new HttpHeaders({'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });
  34. return this.httpclient.post<any>(this.ApiUrl+'token',encodeURI(credentials),{headers:reqHeader});
  35. }
  36. }
Step 7
Now, let’s create a Login Component; type the command - ng g component Login
Angular 8 CRUD With Oauth2.0 In WebAPI
LoginComponent.ts
  1. import { Component, OnInit } from '@angular/core';
  2. import { ProductService } from '../product.service';
  3. import { FormControl,FormGroup,Validators } from '@angular/forms';
  4. import { Router} from '@angular/router';
  6. @Component({
  7. selector: 'app-login',
  8. templateUrl: './login.component.html',
  9. styleUrls: ['./login.component.less']
  10. })
  11. export class LoginComponent implements OnInit {
  13. constructor(private productService:ProductService, private router:Router) { }
  15. ngOnInit() {
  16. if(window.sessionStorage.getItem('userToken')!=null){
  17. this.router.navigate(['/Product']);
  18. }
  19. }
  20. LoginForm=new FormGroup({
  21. UserName: new FormControl('',Validators.required),
  22. Password: new FormControl('',Validators.required),
  23. });
  24. OnGetToken(){
  25. const user=this.LoginForm.controls['UserName'].value;
  26. const pass=this.LoginForm.controls['Password'].value;
  27. this.productService.UserAuthentication(user,pass).subscribe((data:any)=>{
  28. window.sessionStorage.setItem('userToken',data.access_token);
  29. this.router.navigate(['/Product']);
  30. });
  31. }
  32. }
Step 8
Paste this code in LoginComponent.html file.
  1. <form [formGroup]="LoginForm" (ngSubmit)="OnGetToken()">
  2. <div>
  3. <Label>
  4. UserName
  5. <input type="text" formControlName="UserName">
  6. </Label>
  7. </div>
  8. <div>
  9. <label>
  10. Password
  11. <input type="password" formControlName="Password">
  12. </label>
  13. </div>
  14. <div>
  15. <button type="submit" [disabled]="!LoginForm.valid"> Login</button>
  16. </div>
  17. </form>
Step 9
Create Product component, type the command - ng g component Product
Angular 8 CRUD With Oauth2.0 In WebAPI
ProductComponent.ts
  1. import { Component, OnInit } from '@angular/core';
  2. import { ProductService } from '../product.service';
  3. import { ProductDTO } from '../ProductDTO';
  4. import { FormGroup,FormControl,Validators } from '@angular/forms';
  5. @Component({
  6. selector: 'app-product',
  7. templateUrl: './product.component.html',
  8. styleUrls: ['./product.component.less']
  9. })
  10. export class ProductComponent implements OnInit {
  12. constructor(private productservice: ProductService) { }
  14. ngOnInit() {
  15. this.GetAllProducts();
  16. }
  17. ProductList:ProductDTO[];
  18. product:ProductDTO;
  19. productIdUpdate = null;
  20. ProductForm=new FormGroup({
  21. Name: new FormControl('',Validators.required),
  22. Price: new FormControl(''),
  23. });
  24. OnSubmit(){
  25. if(this.productIdUpdate==null){
  26. const product=this.ProductForm.value;
  27. this.InsertProduct(product);
  28. }
  29. else{
  30. const employee=this.ProductForm.value;
  31. this.UpdateProduct(employee);
  32. }
  33. }
  35. GetAllProducts(){
  37. this.productservice.GetProducts().subscribe(data=>{this.ProductList=data;});
  38. }
  39. GetProductById(Id:string){
  40. this.productservice.GetProductById(Id).subscribe(data=>{
  41. this.SetProductFormValues(data);
  42. });
  44. }
  45. SetProductFormValues(product: ProductDTO){
  46. this.ProductForm.controls['Name'].setValue(product.Name);
  47. this.ProductForm.controls['Price'].setValue(product.Price);
  48. this.productIdUpdate=product.ID;
  49. }
  50. InsertProduct(product:ProductDTO){
  51. this.productservice.InsertProduct(product).subscribe(()=>{
  52. this.GetAllProducts();
  53. });
  54. }
  55. UpdateProduct(product:ProductDTO){
  56. product.ID=this.productIdUpdate;
  57. this.productservice.UpdateProduct(product).subscribe(()=>{
  58. this.productIdUpdate=null;
  59. this.GetAllProducts();
  60. });
  61. }
  62. DeleteProduct(Id:string){
  63. this.productservice.DeleteProduct(Id).subscribe(()=>{
  64. this.productIdUpdate=null;
  65. this.GetAllProducts();
  66. });
  67. }
  68. }
Step 10
Paste this code in ProductComponent.html.
ProductComponent.html
  1. <form [formGroup]="ProductForm" (ngSubmit)="OnSubmit()">
  2. <div>
  3. <label>
  4. Name
  5. <input type="text" formControlName="Name">
  6. </label>
  7. </div>
  8. <div style="margin-top: 20px">
  9. <label>
  10. Price
  11. <input type="text" formControlName="Price">
  12. </label>
  13. </div>
  14. <div>
  15. <button type="submit" [disabled]="!ProductForm.valid">Save</button>
  16. </div>
  17. </form>
  18. <table>
  19. <tr>
  20. <th>
  21. Name
  22. </th>
  23. <th>
  24. Price
  25. </th>
  26. <th>
  27. Update Record
  28. </th>
  29. <th>
  30. Delete Record
  31. </th>
  32. </tr>
  33. <tr *ngFor="let item of ProductList">
  34. <td>
  35. {{item.Name}}
  36. </td>
  37. <td>
  38. {{item.Price}}
  39. </td>
  40. <td>
  41. <button type="button" (click)="GetProductById(item.ID)">Edit</button>
  42. </td>
  43. <td>
  44. <button type="button" (click)="DeleteProduct(item.ID)">Delete</button>
  45. </td>
  46. </tr>
  47. </table>
Step 11
Open app-routing.module.ts file and paste this code.
  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  3. import { ProductComponent} from '../app/product/product.component';
  4. import {LoginComponent} from '../app/login/login.component';
  6. const routes: Routes = [
  7. {path:'', redirectTo:'/Product',pathMatch:'full'},
  8. {path:'Product', component:ProductComponent},
  9. {path:'Login', component:LoginComponent}
  10. ];
  12. @NgModule({
  13. imports: [RouterModule.forRoot(routes)],
  14. exports: [RouterModule]
  15. })
  16. export class AppRoutingModule { }
Step 12
Create a new file with the name as auth.interceptor.ts file and paste this code.
  1. import { HttpInterceptor,HttpHandler,HttpEvent,HttpRequest } from '@angular/common/http';
  2. import { Injectable } from '@angular/core';
  3. import { Router } from '@angular/router';
  4. import { Observable } from 'rxjs';
  7. @Injectable()
  8. export class AuthInterceptor implements HttpInterceptor{
  10. constructor(private router:Router){}
  11. intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>>
  12. {
  13. if(req.headers.get('No-Auth') == "True")
  14. {
  15. return next.handle(req.clone());
  16. }
  18. if(window.sessionStorage.getItem('userToken')!=null){
  19. const clonedReq=req.clone({
  20. headers:req.headers.set("Authorization","Bearer " +window.sessionStorage.getItem('userToken'))
  21. });
  22. return next.handle(clonedReq);
  23. }
  24. else{
  25. this.router.navigateByUrl("/Login");
  26. }
  27. }
  28. }
Step 13
Open app.module.ts class and paste this code.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { AppRoutingModule } from './app-routing.module';
  4. import { AppComponent } from './app.component';
  5. import { ProductComponent } from './product/product.component';
  6. import { LoginComponent } from './login/login.component';
  7. import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  8. import { ReactiveFormsModule } from '@angular/forms';
  9. import { ProductService } from './product.service';
  10. import { AuthInterceptor } from '../app/auth.interceptor';
  11. import {enableProdMode} from '@angular/core';
  13. enableProdMode();
  14. @NgModule({
  15. declarations: [
  16. AppComponent,
  17. ProductComponent,
  18. LoginComponent
  19. ],
  20. imports: [
  21. BrowserModule,
  22. AppRoutingModule,
  23. ReactiveFormsModule,
  24. HttpClientModule
  25. ],
  26. providers: [ProductService
  27. ,
  28. {
  29. provide:HTTP_INTERCEPTORS,
  30. useClass:AuthInterceptor,
  31. multi:true
  32. }
  33. ],
  34. bootstrap: [AppComponent]
  35. })
  36. export class AppModule { }
Step 14
Open the app.component.html file, remove all the code except only one tag <router-outlet></router-outlet>.
Step 15
Open the productcomponent.less stylesheet file and paste this code.
  1. table, td, th{
  2. border:1px solid rgb(29, 202, 52);
  3. }
  4. table{
  5. border-collapse: collapse;
  6. width: 90%;
  7. }
  8. th{
  9. height: 50px;
  10. }
Stylesheet and all other files are highlighted
Angular 8 CRUD With Oauth2.0 In WebAPI
Step 16
Now just save all the data and refresh the browser. You will see the login page. Once you pass the username and password, the browser will redirect to the Product page.

Angular 8 CRUD With Oauth2.0 In WebAPI

Conclusion

In this article, we have performed complete CRUD operations in Angular 8. Also, we learned how we retrieve the authorized token from the WebAPI and add in the header of the HTTP request and perform all the operations by passing the Oauth Token. If you face any problem or have any query, please comment in the comment section below. Please don’t forget to like and share it.
<< Previous Part Angular 8 CRUD with Oauth2.0 in WebAPI Part One