smolkat

import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes, Route } from '@angular/router';
import { ItemsComponent } from './items/items.component';
import { FavouritesComponent } from './favourites/favourites.component';
import { ItemDetailsComponent } from './item-details/item-details.component';

const routes: Routes = [
  {path: 'items', component: ItemsComponent},
  {path: 'favourites', component: FavouritesComponent},

smolkat

import { Injectable } from '@angular/core';
import { ITEMS } from './demo_items';
import { Item } from './item';
import { Observable, of } from 'rxjs';
import { TransactionsService } from './transactions.service';

@Injectable({
  // at the root level, Angular creates a single, shared instance
  // of ItemService and injects into any class that asks for it.
  providedIn: 'root'

smolkat

import { Component, OnInit, Input } from '@angular/core';
import { Item } from '../item';
import { ItemsComponent } from '../items/items.component';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { ItemService } from '../item.service';

@Component({
  selector: 'app-item-details',
  templateUrl: './item-details.component.html',

smolkat

<!-- displays the details -->
<div *ngIf='item'>
        <h3>Details</h3>
        <label>This is a </label>{{item.name}}<br>
        <label>Its value is </label>{{item.value}}<br>
        <label>{{item.info}}</label>
</div>
<div>
        <button (click)="goBack()">back</button>
</div>

smolkat

<div>
  <h3>Favourite Items</h3>
  <div class="grid grid-pad">
    <a *ngFor="let item of items" class="col-1-4"
    routerLink="/details/{{item.id}}">
      <div class="module item">
        <h4>{{item.name}}</h4>
      </div>
    </a>
  </div>

smolkat

<ul class="items">
    <li *ngFor='let item of items'>
        <a routerLink="/details/{{item.id}}">
            <span class="badge">{{item.id}}</span>
            {{item.name | uppercase}} 
            <span class="value">{{item.value}}</span>
        </a>
    </li>    
</ul>

smolkat

import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes, Route } from '@angular/router';
import { ItemsComponent } from './items/items.component';
import { FavouritesComponent } from './favourites/favourites.component';

const routes: Routes = [
  {path: 'items', component: ItemsComponent},
  {path: 'favourites', component: FavouritesComponent},
  {path: '', redirectTo: '/favourites', pathMatch: 'full'},

smolkat

import { Component, OnInit } from '@angular/core';
import { ItemService } from '../item.service';
import { Item } from '../item';

@Component({
  selector: 'app-favourites',
  templateUrl: './favourites.component.html',
  styleUrls: ['./favourites.component.css']
})
export class FavouritesComponent implements OnInit {

smolkat

<h3>Favourite Items</h3>
<div class="grid grid-pad">
  <a *ngFor="let item of items" class="col-1-4">
    <div class="module item">
      <h4>{{item.name}}</h4>
    </div>
  </a>
</div>

smolkat

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes, Route } from '@angular/router';
import { ItemsComponent } from './items/items.component';

const routes: Routes = [{
  path: 'items',
  component: ItemsComponent
}];
@NgModule({