File
Implements
Metadata
| selector |
app-vet-list |
| styleUrls |
./vet-list.component.css |
| templateUrl |
./vet-list.component.html |
Methods
|
deleteVet
|
deleteVet(vet: Vet)
|
|
|
Parameters :
| Name |
Type |
Optional |
| vet |
Vet
|
No
|
|
|
editVet
|
editVet(vet: Vet)
|
|
|
Parameters :
| Name |
Type |
Optional |
| vet |
Vet
|
No
|
|
import {Component, OnInit} from '@angular/core';
import {Vet} from '../vet';
import {VetService} from '../vet.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-vet-list',
templateUrl: './vet-list.component.html',
styleUrls: ['./vet-list.component.css']
})
export class VetListComponent implements OnInit {
vets: Vet[];
errorMessage: string;
responseStatus: number;
constructor(private vetService: VetService, private router: Router) {
this.vets = [];
}
ngOnInit() {
this.vetService.getVets().subscribe(
vets => this.vets = vets,
error => this.errorMessage = error as any);
}
deleteVet(vet: Vet) {
this.vetService.deleteVet(vet.id.toString()).subscribe(
response => {
this.responseStatus = response;
this.vets = this.vets.filter(currentItem => !(currentItem.id === vet.id));
},
error => this.errorMessage = error as any);
}
gotoHome() {
this.router.navigate(['/welcome']);
}
addVet() {
this.router.navigate(['/vets/add']);
}
editVet(vet: Vet) {
this.router.navigate(['/vets', vet.id, 'edit']);
}
}
<!--
~ /*
~ * Copyright 2016-2017 the original author or authors.
~ *
~ * Licensed under the Apache License, Version 2.0 (the "License");
~ * you may not use this file except in compliance with the License.
~ * You may obtain a copy of the License at
~ *
~ * http://www.apache.org/licenses/LICENSE-2.0
~ *
~ * Unless required by applicable law or agreed to in writing, software
~ * distributed under the License is distributed on an "AS IS" BASIS,
~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ * See the License for the specific language governing permissions and
~ * limitations under the License.
~ */
-->
<div class="container-fluid">
<div class="container xd-container">
<h2>Veterinarians</h2>
<table id="vets" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Specialties</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let vet of vets">
<td>
{{ vet.firstName }} {{ vet.lastName }}
</td>
<td>
<div *ngFor="let spec of vet.specialties">
{{ spec.name }}
</div>
</td>
<td>
<button class="btn btn-default" (click)="editVet(vet)">Edit Vet</button>
<button class="btn btn-default" (click)="deleteVet(vet)">Delete Vet</button>
</td>
</tr>
</tbody>
</table>
<div>
<button class="btn btn-default" (click)="gotoHome()">Home</button>
<button class="btn btn-default" (click)="addVet()">Add Vet</button>
</div>
</div>
/*
*
* * Copyright 2016-2017 the original author or authors.
* *
* * Licensed under the Apache License, Version 2.0 (the "License");
* * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* *
* * http://www.apache.org/licenses/LICENSE-2.0
* *
* * Unless required by applicable law or agreed to in writing, software
* * distributed under the License is distributed on an "AS IS" BASIS,
* * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* * See the License for the specific language governing permissions and
* * limitations under the License.
*
*/
Legend
Html element with directive