So I have a shop page with a child component called FilterBarComponent and onInit I want it to emit all the category as by default I want all the products in the shop to be rendered, but on my homePageComponent I have a button that allows a user to navigate to the shopPage and view a specific category for e.g a button that says "view shirts". My problem is that the default categories array occurs after the subscriber function finishes and also in the subscriber the event emitter does not fire. Here is another question of mine that relates to this problem. Angular EventEmitter is not emitting in subscriber
FilterBarComponent
categories = [];
@Output() filteredCategory = new EventEmitter<any>();
@Output() maxiumPriceEmitter = new EventEmitter<any>();
categorySub: Subscription;
formatLabel(value: number) {
return 'R' + value;
}
constructor(private shopService: ShopService) {}
ngOnInit() {
this.initCategories();
this.filterCategories();
this.updateCategories();
}
filterCategories() {
this.shopService.filterCategories.subscribe(
(fCategory: string) => {
this.categories.map(category => {
category.checked = category.name === fCategory;
});
this.updateCategories();
});
}
initCategories() {
this.categories = [
{ name: 'dress', checked: true, displayName: 'Dresses' },
{ name: 'top', checked: true, displayName: 'Shirts' },
{ name: 'skirt', checked: true, displayName: 'Skirts/Pants' },
{ name: 'purse', checked: true, displayName: 'Purse' },
{ name: 'bag', checked: true, displayName: 'Bags' },
];
}
updateCategories() {
const categories = this.categories
.filter((category) => {
return category.checked;
});
console.log(categories);
this.filteredCategory.emit(categories);
}
in the console at first I get the correct result but then categories array resets
[{}]
{name: "top", checked: true, displayName: "Shirts"}
[{…}, {…}, {…}, {…}, {…}]
{name: "dress", checked: true, displayName: "Dresses"}
1: {name: "top", checked: true, displayName: "Shirts"}
2: {name: "skirt", checked: true, displayName: "Skirts/Pants"}
3: {name: "purse", checked: true, displayName: "Purse"}
4: {name: "bag", checked: true, displayName: "Bags"}
length: 5
the Observable in ShopService
filterCategories = new BehaviorSubject("category");
My problem is that when the subscription to filter for a specific category is fired the result happens before the default settings are emitted.
. There's a couple ways to interpret that. Could you provide a list of steps which recreates the issue. Because I see one potential cause, but I want to ensure I understand the problem first. – Paul