import { Component , OnInit , Inject } from '@angular/core' ; import { HttpClient } from '@angular/common/http' ; import { ActivatedRoute } from '@angular/router' ; import { switchMap , tap } from 'rxjs/operators' ; import { Item } from '../item' ; import { ShoppingCartService } from '../shopping-cart.service' ; import { HTTP_BASE_URL } from '../app.module' ; interface DepartmentData { title : string ; url : string ; } @ Component ( { selector : 'app-department' , templateUrl : './department.component.html' , styleUrls : [ './department.component.css' ] } ) export class DepartmentComponent implements OnInit { title = "" ; response : Item [ ] ; constructor ( private readonly route , private readonly http , private readonly cart , @ Inject ( HTTP_BASE_URL ) private readonly BASE_URL ) { } ngOnInit ( ) { this . route . data . pipe ( tap ( ( data ) => { this . title = data . title ; } ) , switchMap ( ( data ) => this . http . get ( this . BASE_URL + data . url ) ) ) . subscribe ( ( response ) => { this . response = response ; } ) ; } truncate ( str ) { if ( str . length < 20 ) { return str ; } else { return str . substr ( 0 , 17 ) + "..." ; } } addToCart ( entry ) { this . cart . add ( entry ) ; } }