Showing an ActivityIndicator with Observable async

How to use an ActivityIndicator with Observable async

  •         
    ngOnInit(){
      this.isLoading= true;
      this.isAnonymous = BackendService.isAnonymous;
      this.sub$ = this.route.params;
      this.articles$ = this.sub$.switchMap((params: any) => {
                                  this.categoryTitle = params['categoryTitle'];
                                  return <any>this.firebaseService.getArticleList(params['id'])});	
     this.articles$.subscribe(()=>{
               this.isLoading= false;
     });
    }
            
        

  •         
    <ListView [items]="articles$ | async">
                <template let-item="item">                  
                    <GridLayout>
                        <GridLayout columns="auto,*,auto" class="card">
                            <Image class="m-5" horizontalAlignment="left" col="0" width="40" height="40" [src]="item.imagepath.length>0 ? item.imagepath : '~/assets/camera.png'"></Image>
                            <Label class="m-5"  (tap)="viewDetail(item.id, categoryTitle)" col="1" [text]='item.title'></Label>
                            <Label class="m-10 font-awesome"   style="color:black;" col="2" text='&#xf15c;'></Label>
                        </GridLayout>                 
                    </GridLayout>
                </template>
        </ListView>
        <StackLayout class="dimmer" visibility="">
                   <GridLayout rows="*" visibility="">
                           <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>    
                   </GridLayout>
        </StackLayout>