Angular 2+: Updating a list from User HTML dropdown selection

Question

I'm using an enum as one of my model property for type safety

export enum Category{
    Skin,    
    Lips,
    BodyCare,
    Suncare
}

My base model is like so:

import { Category } from './category';

export class Item {
    constructor(
        public category?: Category,
        public name?: string,
        public description?: string,
        public imageURL?: string,
        public price?: number) { }
}

The Item class is then injected into an ItemList class (not shown due to size), which in turn is injected into this ItemRepository class. ItemList contains an array of items and just one getAllListedItems(): Item[] method. The ItemRepository in turn contains methods to get all the items on the item list, or just the ones based on a selected category

import { Injectable } from "@angular/core";
import { Item } from "./item";
import { ItemList } from "./item.list";
import { Category } from "./category";

@Injectable()
export class ItemRepository {

    private itemList : Item[]

    constructor(repo: ItemList){
        this.itemList = repo.getAllListedItems();
    }

    public getAllItems(): Item[] {
        return this.itemList;
    }

    public getItemsByCategory(category : Category){
        return this.itemList.filter(item => item.category == category )
    }

    public getCategories(): Array<string>{        
        return Object.keys(Category).filter(cat => isNaN(cat as any))
    }
}

Here's the component.

It contains a method to get the Categories for to populate a dropdown box in the template, and the items to populate a list based on the 'selectedCategory' property, which has been defaulted to null.

import { Component } from '@angular/core';
import { Item } from '../repo/item';
import { ItemRepository } from '../repo/item.repository';
import { Category } from '../repo/category';



@Component({
  selector: 'shop',
  templateUrl: './shop.component.html',
  styleUrls: ['./shop.component.css']
})
export class ShopComponent{ 

    private shopItems : ItemRepository    
    private selectedCategory : Category = null;

    constructor(shopItems: ItemRepository){ 
        this.shopItems = shopItems        
    }

    get items(): Item[] { 
        return (this.selectedCategory == null)? this.shopItems.getAllItems() : this.shopItems.getItemsByCategory(this.selectedCategory);
    }

    get categories() : Array<string> { 
        return this.shopItems.getCategories();
    }

    changeCategory(userSelectedCategory?) {
        this.selectedCategory = userSelectedCategory;
    }



}

I'm trying to make the template here populate the list based on the option in the dropdown menu selected. Selecting an option calls changeCategory() in the component to change selectedCategory. How can reflect that in the list? I am aware of the Observable class in Angular, but can't seem to find a simple tutorial to use it properly.

    <div class="container-fluid">
    <div class="row" id="shop-controls">
        <section class="col-xs-6" id="filter-control">
            Filter By:
            <select>
                <option value="none" (click)="changeCategory()">No Filter</option>
                <option *ngFor="let cat of categories; let i = index" value="{{cat}} " (click)="changeCategory(i + 1)" >{{cat}}</option>
            </select>
        </section>
        <section class="col-xs-6" id="sort-control">
            Sort By:
            <select>
                <option value="name">Name</option>
                <option value="priceasc">Price Asc.</option>
                <option value="pricedesc">Price Desc.</option>
            </select>
        </section>
    </div>
    <div class="row product-block" *ngFor="let item of items">
        <div class="col-xs-4 col-sm-5 product-img-col">
            <img class="img-responsive " [src]="item.imageURL">
        </div>
        <div class="col-xs-8 col-sm-7 product-stats-col">
            <h3>
                <span id="product-name">{{item.name}}</span>
            </h3>
            <p>
                <span id="product-description">{{item.description}}</span>
            </p>
            <h3>
                <span id="product-price">{{item.price | currency:'USD':true:'1.2-2'}}</span>
            </h3>
        </div>
    </div>
</div>

Thanks

Answer 1

Your getter and setter should ideally set values for a private variable and set the variable using a method so that gives you more control over the flow of data.

Kindly try below code:

// Private variable to hold the item list
private _items: Item[];

// Load the list on component initialization
ngOnInit() {
    this.getItems();
}

get items(): Item[] {
    return this._items; // Return the private variable
}

// Private method to initialize the item list
private getItems() {
    this._items = (this.selectedCategory == null) ?
        this.shopItems.getAllItems() :
        this.shopItems.getItemsByCategory(this.selectedCategory);
}

changeCategory(userSelectedCategory?) {
    this.selectedCategory = userSelectedCategory;
    this.getItems(); // this will refresh the item list
}