Angular subscription is not working as I expect

Question

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");

Could you elaborate on 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

Mitch Mitch · Accepted Answer · 2020-05-09T12:32:43

I owe this answer to @Józef Podlecki for another question that he answered of mine.

I need to use a BehaviorSubject instead of a regular subject in the ShopService

filterCategories = new BehaviorSubject("all");

Filter Bar Component


  ngOnInit() {
    this.initCategories();
    this.filterCategories();
  }

  filterCategories() {
    this.shopService.filterCategories.subscribe((fCategory: string) => {
      if (fCategory === 'all') {
        this.updateCategories();
      } else {
        this.categories.map((category) => {
          category.checked = category.name === fCategory;
        });
        this.updateCategories();
      }
    });
  }

Angular subscription is not working as I expect

1 Answers