.ts=controller
html inside component
1. npm install -g @angular/cli
>> some bugs come so installed noje , node js, npm
2. create one folder : angular-php-app
3. ng new frontend
4. cd frontend
5. ng serve
>> Now default angular screen will display
6. import HttpClientModule, and FormsModule
>> Open the src/app/app.module.ts file
>> add this 2 lines :
import { HttpClientModule } from ‘@angular/common/http’;
import { FormsModule } from ‘@angular/forms’;
>> add 2 lines in @NgModule import array:
HttpClientModule,
FormsModule,
7. create angular service:
ng generate service api
8. Open the src/app/api.service.ts and start by importing and injecting HttpClient
<code>
import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
@Injectable({
providedIn: ‘root’
})
export class ApiService {
constructor(private httpClient: HttpClient) {}
}
</code>
>> We inject HttpClient as a private httpClient instance via the service constructor. This is called *dependency injection*
>> You can now use the injected httpClient instance to send HTTP requests to your PHP REST API.
9. Creating the Policy Model
>> Create a policy.ts file in the src/app folder of your project and the add the following TypeScript class:
<code>
export class Policy {
id: number;
number: number;
amount: number;
}
</code>
10. Defining the CRUD Methods
>> open the src/app/api.service.ts
>> import the Policy model and the RxJS Observable interface
<code>
import { Policy } from ‘./policy’;
import { Observable } from ‘rxjs’;
</code>
>> Next, define the PHP_API_SERVER variable in the service, The PHP_API_SERVER holds the address of the PHP server.
<code>
export class ApiService {
PHP_API_SERVER = “http://127.0.0.1:8080″;
</code>
>> Next, add the readPolicies() method
<code>
readPolicies(): Observable<Policy[]>{
return this.httpClient.get<Policy[]>(`${this.PHP_API_SERVER}/api/read.php`);
}
</code>
11. Creating the Angular Component:
>> run the command:
ng generate component dashboard
>> Let’s add this component to the Router. Open the src/app/app-routing.module.ts file and add a /dashboard route.
<code>
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { DashboardComponent } from ‘./dashboard/dashboard.component’;
const routes: Routes = [
{ path: ‘dashboard’, component: DashboardComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
</code>
>> Now access URL: http://localhost:4200/dashboard
12. Let’s remove the boilerplate content added by Angular CLI.
>> Open the src/app/app.component.html file.
>> We only leave the router outlet where Angular router will insert the matched component(s).
<code>
<router-outlet></router-outlet>
</code>
13. open the src/app/dashboard/dashboard.component.ts file and import ApiService then inject it via the component constructor.
<code>
import { Component, OnInit } from ‘@angular/core’;
import { ApiService } from ‘../api.service’;
@Component({
selector: ‘app-dashboard’,
templateUrl: ‘./dashboard.component.html’,
styleUrls: [‘./dashboard.component.css’]
})
export class DashboardComponent implements OnInit {
constructor(private apiService: ApiService) { }
ngOnInit() {
}
}
</code>
>> We inject ApiService as a private apiService instance.
>> import policy
import { Policy } from ‘../policy’;
>> To read data put below code in ngOnInit()
this.apiService.readPolicies().subscribe((policies: Policy[])=>{
this.policies = policies;
console.log(this.policies);
})
14. Adding the Table and Form
>> Open the src/app/dashboard/dashboard.component.html
<h1>Insurance Policy Management</h1>
<div>
<table border=’1′ width=’100%’ style=’border-collapse: collapse;’>
<tr>
<th>ID</th>
<th>Policy Number</th>
<th>Policy Amount</th>
<th>Operations</th>
</tr>
<tr *ngFor=”let policy of policies”>
<td>{{ policy.id }}</td>
<td>{{ policy.number }}</td>
<td>{{ policy.amount }}</td>
<td>
<button (click)=”deletePolicy(policy.id)”>Delete</button>
<button (click)=”selectPolicy(policy)”>Update</button>
</td>
</tr>
</table>
