Scribd
Upload
32 views2 pages

Steps For Insert API

The document outlines 10 steps for making an INSERT API call: 1) Create an insert method, 2) Generate an add component, 3) Add a route, 4) Design an HTML form, 5) Import FormsModule, 6) Create a Faculty object, 7) Apply two-way binding, 8) Bind the form submit, 9) Inject services, 10) Create an insert method to make the API call and redirect on success.

Uploaded by

Anonymous Dev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views2 pages

Steps For Insert API

The document outlines 10 steps for making an INSERT API call: 1) Create an insert method, 2) Generate an add component, 3) Add a route, 4) Design an HTML form, 5) Import FormsModule, 6) Create a Faculty object, 7) Apply two-way binding, 8) Bind the form submit, 9) Inject services, 10) Create an insert method to make the API call and redirect on success.

Uploaded by

Anonymous Dev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Steps for INSERT API Call

Step 01: Create a method in api-faculty.service.ts


insert(form:any){
return this._http.post(this.apiUrl,form);
}

Step 02: Create a component named add-faculty


ng g c add-faculty

Step 03: add route in app-routing.module.ts


Note: add this route before detail component route.

{path: "faculty/add", component: AddFacultyComponent},

Step 04: Design HTML form to add the data

Step 05: import FormsModule in app-module.ts

Step 06: Create an object of Faculty class (which was created in detail page) in add-
faculty.component.ts file
facultyDetail : Faculty = new Faculty();

Step 07: Apply two-way data binding in all the form fields in add-faculty.component.html
<input
type="text"
class="form-control"
name="FacultyName"
[(ngModel)]="facultyDetail.FacultyName"
class="col-md-6"
>

Step 08: Bind ngSubmit in form in add-faculty.component.html file


<form (ngSubmit)="insertFaculty()">
Step 09: Inject ApiFacultyService and Router in add-faculty.component.ts file
constructor(private _api:ApiFacultyService, private _route:Router) { }

Step 10: Create a method named insertFaculty in add-faculty.component.ts file


insertFaculty(){
let ob = this._api.insert(this.facultyDetail);
ob.subscribe(()=>{
this._route.navigate(['faculties']);
})
}

HAPPY LEARNING

You might also like