ngModelon our input will help us clear it when new category is created. Let’s see
newCategoryName, so we won’t create the same category twice and we have nice UX. Shall we see our Categories Service?
onCategoryClickin Categories Component will work like
onPhotoClickin Photo Component. Just instead setting active photo, we’ll set active category.
categoryIDfield to our photos and put proper IDs there. This way we can easily group photos by category.
activeCategoryPhotos$. We will base it on two existing Observables:
photos$from Photos Service and
activeCategory$from Category Service:
combineLatest, we have used it before. It listens to all given arguments and produces new value every time any of given Observables produces value. Like we did before, let’s break this part down and take
propEqsays: I take object you gave me and if property
"categoryID"of this object equals
categoryIDvalue I return true. We have it.
activeCategoryPhotos$is an Observable that filters
activeCategory$from Categories Service. To use it, you have to go Gallery Component and bound it to
photosList$, like that:
activeCategory$that keeps track of active category! Let’s add it:
mergeCategoriesso it takes new Observable into consideration.
newCategoriesinto one array, but also adds new field
activeto each of them so we can use it in HTML template to add some class, like
active-categoryand mark this category with CSS. We have photos, we have categories, we have created few Observables! Time to celebrate and think what more can we do with our gallery!