File

src/app/vets/vet-list/vet-list.component.ts

Implements

OnInit

Metadata

selector app-vet-list
styleUrls ./vet-list.component.css
templateUrl ./vet-list.component.html

Index

Properties
Methods

Constructor

constructor(vetService: VetService, router: Router)
Parameters :
Name Type Optional
vetService VetService No
router Router No

Methods

addVet
addVet()
Returns : void
deleteVet
deleteVet(vet: Vet)
Parameters :
Name Type Optional
vet Vet No
Returns : void
editVet
editVet(vet: Vet)
Parameters :
Name Type Optional
vet Vet No
Returns : void
gotoHome
gotoHome()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

errorMessage
Type : string
responseStatus
Type : number
vets
Type : Vet[]
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>

./vet-list.component.css

/*
 *
 *  * 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
Component
Html element with directive

result-matching ""

    No results matching ""