{
    "resultCode": 1,
    "resultData": {
        "Itinary": [
            {
                "ItenaryFor": "Transfer",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Sightseen",
                "Icon": "holiday",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Sightseen",
                "Icon": "holiday",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Phi Phi Island, Phuket City Tour",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": null,
                "BackgroundImg": null
            },
            {
                "ItenaryFor": "Sightseen",
                "Icon": "holiday",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Coral Island",
                "BackgroundImg": ""
            },
            {
                "ItenaryFor": "Hotel",
                "Icon": "motel",
                "Comment": null,
                "Iscustomsave": true,
                "TourDelight": "Coral Island",
                "BackgroundImg": null
            }
        ]
    }
}

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    filteredProducts: IProduct[];
    products: IProduct[] = [];

    constructor(private _productService: ProductService) {

    }

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => {
                    this.products = products;
                    this.filteredProducts = this.products;
                },
                    error => this.errorMessage = <any>error);
    }
}