File

src/app/pets/pet-list/pet-list.component.ts

Implements

OnInit

Metadata

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

Index

Properties
Methods
Inputs

Constructor

constructor(router: Router, petService: PetService)
Parameters :
Name Type Optional
router Router No
petService PetService No

Inputs

pet
Type : Pet

Methods

addVisit
addVisit(pet: Pet)
Parameters :
Name Type Optional
pet Pet No
Returns : void
deletePet
deletePet(pet: Pet)
Parameters :
Name Type Optional
pet Pet No
Returns : void
editPet
editPet(pet: Pet)
Parameters :
Name Type Optional
pet Pet No
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

deleteSuccess
Default value : false
errorMessage
Type : string
responseStatus
Type : number
import {Component, Input, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {PetService} from '../pet.service';
import {Pet} from '../pet';

@Component({
  selector: 'app-pet-list',
  templateUrl: './pet-list.component.html',
  styleUrls: ['./pet-list.component.css']
})
export class PetListComponent implements OnInit {
  errorMessage: string;
  @Input() pet: Pet;
  responseStatus: number;
  deleteSuccess = false;

  constructor(private router: Router, private petService: PetService) {
    this.pet = {} as Pet;
  }

  ngOnInit() {
  }

  editPet(pet: Pet) {
    this.router.navigate(['/pets', pet.id, 'edit']);
  }

  deletePet(pet: Pet) {
    this.petService.deletePet(pet.id.toString()).subscribe(
      response => {
        this.deleteSuccess = true;
        this.pet = {} as Pet;
      },
      error => this.errorMessage = error as any);
  }

  addVisit(pet: Pet) {
    this.router.navigate(['/pets', pet.id, 'visits', 'add']);
  }

}
<!--
  ~ /*
  ~  * 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.
  ~  */
  -->

<table [hidden]="deleteSuccess" class="table table-striped">
  <tr>
    <td valign="top">
      <dl class="dl-horizontal">
        <dt>Name</dt>
        <dd>{{ pet.name }}</dd>
        <dt>Birth Date</dt>
        <dd>{{ pet.birthDate }}</dd>
        <dt>Type</dt>
        <dd *ngIf="!deleteSuccess">{{ pet.type.name }}</dd>
        <button class="btn btn-default" (click)="editPet(pet)">Edit Pet</button>
        <button class="btn btn-default" (click)="deletePet(pet)">Delete Pet</button>
        <button class="btn btn-default" (click)="addVisit(pet)">Add Visit</button>

      </dl>
    </td>
    <td valign="top">
      <app-visit-list [visits]="pet.visits"></app-visit-list>
    </td>
  </tr>

</table>

./pet-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 ""