ion-select not updated when is inside then ng-content of custom component

Question

I've a ionic page with a ion-select inside a custom component that shows itself when a flag isLoading is true. The ion-change callback makes a network request using an Observable, the first operation the callback does is setting the isLoading flag to true.

When the request finishes isLoading is set to false but the ion-select item isn't updated, I don't understand where is the problem.

Below I show the used code, the network call is replaced with a delay() that reproduce the bug

Is this a bug? Is this an angular issue? After spending three days without success I need help

The custom component HTML

    <div>
      <div *ngIf="isLoading else theContent">
        loading...
      </div>
      <ng-template #theContent>
        <ng-content></ng-content>
      </ng-template>
    </div>

The custom component typescript

    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'app-loading',
      templateUrl: './loading.component.html',
      styleUrls: ['./loading.component.scss']
    })
    export class LoadingComponent implements OnInit {
      private _isLoading = false;

      constructor() { }

      ngOnInit() {
      }

      begin() {
        this._isLoading = true;
      }

      end() {
        this._isLoading = false;
      }

      get isLoading() {
        return this._isLoading;
      }
    }

The page HTML

    <ion-content padding>
          <app-loading>
            <ion-select interface="popover" placeholder="select" [(ngModel)]="selected"
              (ionChange)="change($event)">
              <ion-select-option [value]="red">red</ion-select-option>
              <ion-select-option [value]="blue">blue</ion-select-option>
              <ion-select-option [value]="green">green</ion-select-option>
            </ion-select>
          </app-loading>
    </ion-content>

The page Typescript

    import { Component, ViewChild } from '@angular/core';
    import { LoadingComponent } from '../loading/loading.component';
    import { empty, Observable, from, of } from 'rxjs';
    import { switchMap, finalize, delay } from 'rxjs/operators';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
      @ViewChild(LoadingComponent)
      private loadingComponent: LoadingComponent;

      selected: string;

      change() {
        this.loadingComponent.begin();
        of(null).pipe(
          delay(5000),
          finalize(() => this.loadingComponent.end()),
        ).subscribe(v => console.log('done'));
      }
    }