File

src/app/pettypes/pettype-list/pettype-list.component.ts

Implements

OnInit

Metadata

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

Index

Properties
Methods

Constructor

constructor(pettypeService: PetTypeService, router: Router)
Parameters :
Name Type Optional
pettypeService PetTypeService No
router Router No

Methods

deletePettype
deletePettype(pettype: PetType)
Parameters :
Name Type Optional
pettype PetType No
Returns : void
gotoHome
gotoHome()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onNewPettype
onNewPettype(newPetType: Specialty)
Parameters :
Name Type Optional
newPetType Specialty No
Returns : void
showAddPettypeComponent
showAddPettypeComponent()
Returns : void
showEditPettypeComponent
showEditPettypeComponent(updatedPetType: PetType)
Parameters :
Name Type Optional
updatedPetType PetType No
Returns : void

Properties

errorMessage
Type : string
isInsert
Default value : false
pettypes
Type : PetType[]
responseStatus
Type : number
import {Component, OnInit} from '@angular/core';
import {PetType} from '../pettype';
import {Router} from '@angular/router';
import {PetTypeService} from '../pettype.service';
import {Specialty} from '../../specialties/specialty';

@Component({
  selector: 'app-pettype-list',
  templateUrl: './pettype-list.component.html',
  styleUrls: ['./pettype-list.component.css']
})
export class PettypeListComponent implements OnInit {
  pettypes: PetType[];
  errorMessage: string;
  responseStatus: number;
  isInsert = false;

  constructor(private pettypeService: PetTypeService, private router: Router) {
    this.pettypes = [] as PetType[];
  }

  ngOnInit() {
    this.pettypeService.getPetTypes().subscribe(
      pettypes => this.pettypes = pettypes,
      error => this.errorMessage = error as any
    );
  }

  deletePettype(pettype: PetType) {
    this.pettypeService.deletePetType(pettype.id.toString()).subscribe(
      response => {
        this.responseStatus = response;
        this.pettypes = this.pettypes.filter(currentItem => !(currentItem.id === pettype.id));
      },
      error => this.errorMessage = error as any);
  }

  onNewPettype(newPetType: Specialty) {
    this.pettypes.push(newPetType);
    this.showAddPettypeComponent();
  }

  showAddPettypeComponent() {
    this.isInsert = !this.isInsert;
  }

  showEditPettypeComponent(updatedPetType: PetType) {
    this.router.navigate(['/pettypes', updatedPetType.id.toString(), 'edit']);
  }

  gotoHome() {
    this.router.navigate(['/welcome']);
  }
}
<!--
  ~ /*
  ~  * Copyright 2016-2018 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>Pet Types</h2>
    <table id="pettypes" class="table table-striped">
      <thead>
      <tr>
        <th>Name</th>
        <th></th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let pettype of pettypes; let element_id=index">
        <td>
          <input [id]=element_id [readonly]="true" type="text" class="form-control" [(ngModel)]="pettype.name" name="pettype_name" />
        </td>
        <td>
          <button class="btn btn-default" (click)="showEditPettypeComponent(pettype)">Edit</button>
          <button class="btn btn-default" (click)="deletePettype(pettype)">Delete</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div *ngIf="isInsert">
      <app-pettype-add (newPetType)="onNewPettype($event)">...</app-pettype-add>
    </div>
    <div>
      <button class="btn btn-default" (click)="gotoHome()">Home</button>
      <button class="btn btn-default" (click)="showAddPettypeComponent()"> Add </button>
    </div>
  </div>
</div>

./pettype-list.component.css

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""