Build Web API using Angular with ASP.NET MVC5 (Part 2)
Tags: csharp, angular, webdev, javascript
Published: 2020-06-09 07:03:44

In the content in the previous section, we create all method **(GET,PUT,POST,DELELTE)** in ASP.NET MVC 5, now need install Angular to project ASP.NET MVC 5
You can see the previous section :
[Build Angular + ASP.NET MVC 5](https://dev.to/skipperhoa/build-angular-asp-net-mvc-5-4gi3)
[Build Web API using Angular with ASP.NET MVC 5 (Part 1)] (https://dev.to/skipperhoa/build-web-api-using-angular-with-asp-net-mvc5-part-1-2e0i)

Open **ClientApp** folder in Project ASP.NET MVC 5, we have install it in The Article [Build Angular + ASP.NET MVC 5](https://hoanguyenit.com/build-web-api-using-angular-with-aspmvc5-part-2.html)
Create **comment.model.ts** in **ClientApp/src/app** directory, config propeties comment
```js
export class Comment {
  id: number;
  content: string;
  parent: number;
}
```
Continue, we need create service file , config method **GET,PUT,POST,DELETE**
+ **ClientApp/src/app/comment.service.ts**
```js
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Comment } from './comment.model';
const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json', 'X-CSRF-TOKEN': 'QYnhwj1SNxOSgd6wMJi5pxyQJXMgUALjc2Ihv9Si' })
};
@Injectable({
  providedIn: 'root',
})
export class CommentService {
  private REST_API_SERVER = 'https://localhost:44332/api';
  constructor(private http: HttpClient) { }

  getAllComment() {
    return this.http.get(this.REST_API_SERVER + '/comment').pipe(catchError(this.handleError));
  }

  /*
  * ADD COMMENT
  * */
  postAddComment(comment: Comment): Observable<any> {
    return this.http.post(this.REST_API_SERVER + '/comment', comment, httpOptions).pipe(catchError(this.handleError));
  }

  /**
   * EDIT COMMENT
   * */
  getComment(id: number) {
    return this.http.get(this.REST_API_SERVER + '/comment/' + id).pipe(catchError(this.handleError));
  }

  /**
   * PUT COMMENT (UPDATE COMMENT)
   * */
  putComment(id: number, comment: Comment): Observable<any> {
    return this.http.put(this.REST_API_SERVER + '/comment/' + id, comment, httpOptions).pipe(catchError(this.handleError));
  }

  /**
   * DELELE COMMENT
   */
  deleteComment(id: number) {
    return this.http.delete(this.REST_API_SERVER + '/comment/' + id).pipe(catchError(this.handleError));
  }

  handleError(error: HttpErrorResponse) {
    let errorMessage = 'Unknown error!';
    if (error.error instanceof ErrorEvent) {
      // Client-side errors
      errorMessage = `Error: ${error.error.message}`;
    } else {
      // Server-side errors
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    window.alert(errorMessage);
    return throwError(errorMessage);
  }

}
```
- **REST_API_SERVER** : URL Project API ASP.NET MVC 5
- **Config httpOptions**: use install request method Post
- **handleError** :  retrieve error API

+ **ClientApp/src/app/app.comment.ts**
```js
import { Component, OnInit } from '@angular/core';
import { CommentService } from './comment.service';
import {Comment} from './comment.model'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular + ASP MVC 5';
  comments: any;
  commentAdd: string = "";
  commentUpdate: any;
  checkUpdate = false;
  constructor(private commentService: CommentService) { }
  ngOnInit() {
    this.GetAllComment();
  }

/*GET COMMENT*/
  GetAllComment() {
    this.commentService.getAllComment().subscribe(item => {
      this.comments = item;
    });

  }

  /*
   * ADD COMMENT
   */
  AddComment() {
    let _cmt = {
      "id": 10,//you can set id
      "content": this.commentAdd,
      "parent":0,//default 0
    }
    this.commentService.postAddComment(_cmt).subscribe(item => {
      //IF OK
      this.comments = item;
      console.log(item);
    });


  }

  /*
   * UPDATE COMMENT
   */
  EditComment(id) {
    this.checkUpdate = true;
    this.commentService.getComment(id).subscribe(item => {
      this.commentUpdate = item;
    });
  }
  UpdateComment() {

    let id = this.commentUpdate.id;
    this.commentService.putComment(id, this.commentUpdate).subscribe(item => {
      this.comments = item;
      console.log(item);
    });

  }

  /*
   * DELETE COMMENT
   */
  DeleteComment(id: number) {
    this.commentService.deleteComment(id).subscribe(item => {
      this.comments = item;
      console.log(item);
    });
  }
}
```
The following code above , we need to set up features such as (lists comment,add comment,edit,delete)
Open **app.component.html** modify the following code below
```html
<div>

  <h2>{{title}}</h2>
  <table>
    <tr *ngFor="let item of comments">
      <td>{{item.content}}</td>
      <td><button (click)="EditComment(item.id)" style="color:black">Edit</button></td>
      <td><button (click)="DeleteComment(item.id)" style="color:red">Delete</button></td>
    </tr>
  </table>

  <h2>Add Comment</h2>
  <textarea cols="5" rows="5" [(ngModel)]="commentAdd" style="margin: 0px; width: 255px; height: 62px;"></textarea>
  <br />
  <button (click)="AddComment()">Add Comment</button>

  <div class="form" *ngIf="checkUpdate">
    <h2>Update Comment</h2>
    <label>id</label><br />
    <input type="number" name="idComment" [(ngModel)]="commentUpdate.id" /><br />
    <label>content</label><br />
    <textarea cols="5" rows="5" name="ContentComment" [(ngModel)]="commentUpdate.content"> </textarea><br />
    <label>parent</label><br />
    <input type="number" name="ParentComment" [(ngModel)]="commentUpdate.parent" /><br />
    <button (click)="UpdateComment()">Update Comment</button>
  </div>


</div>
```
+ **GetAllComment():**  get all data comment
+ **EditComment(item.id):** call method edit comment
+ **DeleteComment(item.id):** delete comment
+ **AddComment():** add comment
+ **checkUpdate:** check update comment

Open **app.module.ts** file, you update the following code below
```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
The Article : [Build Web API using Angular with ASP.NET MVC5 (Part 2)](https://hoanguyenit.com/build-web-api-using-angular-with-aspmvc5-part-2.html)