How to trigger the DOM inside ion-select that uses *NgFor on the first try with ionChange event from a previous ion-segment value

Question

I'm trying to narrow down the options on sub-category based on the selected value on a category. I am using an (ionChange) function that filters the array based on the category it's selected. when I console log, the sub_category array indeed narrows down, but the DOM still displays all the values on the first try. If I try to select another category then the DOM gets triggered and displays correctly the narrowed down sub_category array. In the following example, I'm also displaying the sub_category's length in a p tag. The sub_category's length is changing correctly from the first try. So the issue here is clearly inside the <ion-select *ngFor>

Here is my code:

<h4>Category <span class="important-text">*</span></h4>
<ion-segment formControlName="ts_general_category (ionChange)="filterByCategory($event.detail.value)">
    <ion-segment-button *ngFor="let general_ts of ts_general"
                        [value]=general_ts.id>
        {{ general_ts.name_en}}
    </ion-segment-button>
</ion-segment>


<div *ngIf="filtered_ts_sub_general && filtered_ts_sub_general.length > 0">
    <p>{{filtered_ts_sub_general.length}}</p>
    <h4>Sub-Category</h4>
    <ion-select formControlName="ts_sub_general_category"
                class="my-selected-option"
                (ionChange)="filterBySubCategory($event.detail.value)"
                interface="popover">
        <ng-container *ngFor="let sub_general of filtered_ts_sub_general; let i = index">
            <ion-select-option [value]=sub_general.id>
                <p >{{i}}</p>
            </ion-select-option>
        </ng-container>
    </ion-select>
</div>

filterByCategory(category: string) {
    this.current_general_id = category;
    this.filtered_ts_sub_general = [...this.ts_sub_general.filter(sg => sg.traffic_sign_general_id.includes(category))];
  }

This is the initial state

On the first click on a category item, the sub_category should have displayed one item but instead showed all of them. The p tag correctly shows the number 1

On the second click, the DOM for sub_category correctly shows only 3 values and the p tag correctly shows the number 3

From the second click and after the dom works as expected, but how can I make it work from the very first click?

I already used the trackBy and the filter pipe, none of them triggers the dom from the first click.