Angular 2 Single Page Apps using Routing – Part 4

Do go through the earlier three blogs, in this 5-part blog series: `Angular 2 Single Page Apps using Routing – Part 1′ and `Angular 2 Single Page Apps using Routing – Part 2‘, Angular 2 Single Page Apps using Routing – Part 3.

Creating `Cats’ Component

Create Cats folder under app folder.

Create cat.component.ts under Cats folder and put the following code in it:

import { Component, OnInit } from '@angular/core';
 import { PetService } from '../pet.service'
 import { Observable } from 'rxjs/Observable';
 import { ActivatedRoute } from '@angular/router';
 declare var $:any; //declartion to use jquery $

@Component({
moduleId: module.id,
templateUrl: ‘cat.html’
})

// Component class
export class CatComponent implements OnInit {
// Private properties for binding
private sub:any;
private cat:string[];

show: boolean = true;

// Private property for binding
cats: Observable<string[]>;

constructor(private petService: PetService) { }

// Load data ones componet is ready
ngOnInit() {
// Pass retreived pets to the property
this.cats = this.petService.findPets(‘cat’);
}

display(id) {
// Retrieve Pet with Id
this.petService.findPetById(id).subscribe(cat => this.cat = cat);
this.show = false;

//Mobile – Show hide listing and details
$(‘.mobile-portrait-hidden’).addClass(‘mobile-portrait-visible’);
$(‘.pet-listing’).removeClass(‘mobile-portrait-visible’).addClass(‘mobile-portrait-hidden’);

$(‘.return-listing’).click(function(){
$(‘.mobile-portrait-hidden’).removeClass(‘mobile-portrait-visible’).addClass(‘mobile-portrait-hidden’);
$(‘.pet-listing’).removeClass(‘mobile-portrait-hidden’).addClass(‘mobile-portrait-visible’);
})
}
}

The component class extends OnInit . When it is ngOnInit method, this is overridden and is called once the component loads.

In the view (cat.html) when the user clicks on the cat’s name, the display function is called with Id of the selected cat. The Id is passed in to the PetService’s findPetById method to fetch a single pet.

this.show = true/false controls the display of ‘Select cat to get the details’ section in the view.

In mobile portrait view only the list is displayed on loading of the listing page. On clicking the name, details are displayed with ‘Return to listing’ button on the top of the details. This is achieved through jquery addClass/removeclass.

Mobile landscape view is similar to desktop view – listing and details section side-by-side. Here the pet’s image in the left is hidden due to space constraint.

Create cat.html under Cats folder and put the following code in it:

<div class="col-sm-2 col-md-3 col-lg-3 text-center hidden-xs">
 <img src="../assets/images/cat.jpg" alt="Cats" class="img-responsive img-circle grow">
 </div>
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mobile-portrait-hidden btn-hidden">
 <button class="btn btn-info btn-lg btn-block return-listing"><i class="glyphicon glyphicon-share-alt"></i> Return to listing</button>
 </div>
 <div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 side-by-side pet-listing">
 <div class="list-group">
 <div class="list-group-item active">
 Cats
 </div>
 <div class="scroll">
 <a class="list-group-item" *ngFor="let cat of cats | async" href="javascript:;" (click)="display(cat.id.$t)">{{ cat.name.$t }}</a>
 </div>
 </div>
 </div>
 <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 side-by-side pet-details mobile-portrait-hidden">
 <div class="list-group">
 <div class="list-group-item active">
 Display details
 </div>
 <div class="list-group-item">
 <div *ngIf="cat" class="details">
 <h2>{{cat.name.$t}}</h2>
 <img src="{{cat.media.photos.photo[3].$t}}" class="img-responsive"/>
 <p><strong>Age: </strong>{{cat.age.$t}}</p>
 <p><strong>Sex: </strong>{{cat.sex.$t}}</p>
 <p><strong>Description: </strong>{{cat.description.$t}}</p>
 </div>
 <div *ngIf="show">
 Select cat to get the details
 </div>
 </div>
 </div>
 </div>

Here we are binding an observable type cat to the view and looping through it with the NgFor directive.

When the user clicks on a cat’s name, the display function is called with Id of the selected cat. The Id is passed in to the PetService’s findPetById method to fetch a single pet and details are displayed in the view.

Depending on this.show status (true/false) the section ‘Select cat to get the details’ is displayed.

The trailing .$t is as a result of the API structure and not an Angular thing.

Create cat.routes.ts under Cats folder. This contains Cat-related routes and then we import and add it to the base route:

import { Routes } from '@angular/router';

import { CatComponent } from ‘./cat.component’;

// Route Configuration
export const catRoutes: Routes = [
{ path: ‘cats’, component: CatComponent },
];