File

src/app/owners/owner-detail/owner-detail.component.ts

Implements

OnInit

Metadata

selector app-owner-detail
styleUrls ./owner-detail.component.css
templateUrl ./owner-detail.component.html

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, router: Router, ownerService: OwnerService)
Parameters :
Name Type Optional
route ActivatedRoute No
router Router No
ownerService OwnerService No

Methods

addPet
addPet(owner: Owner)
Parameters :
Name Type Optional
owner Owner No
Returns : void
editOwner
editOwner()
Returns : void
gotoOwnersList
gotoOwnersList()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

errorMessage
Type : string
owner
Type : Owner
import {Component, OnInit} from '@angular/core';
import {OwnerService} from '../owner.service';
import {ActivatedRoute, Router} from '@angular/router';
import {Owner} from '../owner';


@Component({
  selector: 'app-owner-detail',
  templateUrl: './owner-detail.component.html',
  styleUrls: ['./owner-detail.component.css']
})
export class OwnerDetailComponent implements OnInit {
  errorMessage: string;
  owner: Owner;

  constructor(private route: ActivatedRoute, private router: Router, private ownerService: OwnerService) {
    this.owner = {} as Owner;
  }

  ngOnInit() {
    const ownerId = this.route.snapshot.params.id;
    this.ownerService.getOwnerById(ownerId).subscribe(
      owner => this.owner = owner,
      error => this.errorMessage = error as any);
  }

  gotoOwnersList() {
    this.router.navigate(['/owners']);
  }

  editOwner() {
    this.router.navigate(['/owners', this.owner.id, 'edit']);
  }

  addPet(owner: Owner) {
    this.router.navigate(['/owners', owner.id, 'pets', '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.
  ~  */
  -->

<div class="container-fluid">
  <div class="container xd-container">

    <h2>Owner Information</h2>


    <table class="table table-striped">
      <tr>
        <th>Name</th>
        <td><b>{{ owner.firstName }} {{ owner.lastName }}</b></td>
      </tr>
      <tr>
        <th>Address</th>
        <td>{{ owner.address }}</td>
      </tr>
      <tr>
        <th>City</th>
        <td>{{ owner.city }}</td>
      </tr>
      <tr>
        <th>Telephone</th>
        <td>{{ owner.telephone }}</td>
      </tr>
    </table>

    <button class="btn btn-default" (click)="gotoOwnersList()">< Back</button>
    <button class="btn btn-default" (click)="editOwner()">Edit Owner</button>
    <button class="btn btn-default" (click)="addPet(owner)">Add New Pet</button>

    <br/>
    <br/>
    <br/>
    <h2>Pets and Visits</h2>

    <table class="table table-striped">
      <tr>
        <app-pet-list *ngFor="let pet of owner.pets" [pet]="pet"></app-pet-list>
      </tr>
    </table>
  </div>
</div>

./owner-detail.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 ""