title: async else / Angular is not working as expected
body: <p>I have a code as shown below. It is working fine on <code>ngIf</code> use case. But it has an issue with <code>else</code> use case. That is, it shows else part and suddenly vanished without any change of <code>observable</code>. In other words no change of the data. Can you tell me why? How to avoid it?</p>
  
  <p><em>This is the behavior of it now:</em></p>
  
  <p><a href="https://i.stack.imgur.com/wh6ld.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wh6ld.gif" alt="enter image description here"></a> </p>
  
  <p><em>html</em></p>
  
  <pre><code> &lt;ion-list radio-group [(ngModel)]="budgetGroup" *ngIf="budgetGroups$ | async; let bg;else loading"&gt;
          &lt;ion-item-sliding *ngFor="let b of bg | orderByBudgetGroup"&gt;
            &lt;ion-item&gt;
              &lt;ion-label&gt;{{b.name }}&lt;/ion-label&gt;
              &lt;ion-radio [value]="b.id" (ionSelect)="selectedBudgetGroup(b)"&gt;&lt;/ion-radio&gt;
            &lt;/ion-item&gt;
            &lt;ion-item-options side="right"&gt;
              &lt;button ion-button (click)="editBudgetGroup(b)" color="primary"&gt;
                &lt;ion-icon name="ios-create-outline"&gt;&lt;/ion-icon&gt;
              &lt;/button&gt;
              &lt;button ion-button (click)="deleteBudgetGroup(b)" color="danger"&gt;
                &lt;ion-icon name="ios-trash-outline"&gt;&lt;/ion-icon&gt;
              &lt;/button&gt;
            &lt;/ion-item-options&gt;
          &lt;/ion-item-sliding&gt;
          &lt;ion-item&gt;
          &lt;/ion-item&gt;
        &lt;/ion-list&gt;
  
       &lt;ng-template #loading&gt;
          &lt;ion-grid&gt;
            &lt;ion-row class="header"&gt;
            &lt;/ion-row&gt;
            &lt;ion-row class="footer"&gt;
              &lt;ion-col col-12 class="font-size-14" text-center&gt;
                &lt;div&gt;
                  &lt;P class="margin-bottom-0"&gt;No Budget Group. You can create them by &lt;/P&gt;
                  &lt;p class="margin-top-0"&gt;tapping the “+” button above&lt;/p&gt;
                &lt;/div&gt;
              &lt;/ion-col&gt;
            &lt;/ion-row&gt;
          &lt;/ion-grid&gt;
        &lt;/ng-template&gt;
  </code></pre>
  
  <p><em>.ts</em></p>
  
  <pre><code>budgetGroups$: Observable&lt;BudgetGroup[]&gt;;budgetGroup: string;
  
   ionViewDidLoad() {
      this.budgetGroups$ = this.budgetGroupProvider.getAllBudgetGroups().valueChanges();
   }
  </code></pre>
  
  <p><em>service.ts</em></p>
  
  <pre><code>  getAllBudgetGroups(): AngularFirestoreCollection&lt;BudgetGroup&gt; {
      return this.budgetGroupCollectionRef = this.fireStore.collection(`userProfile/${this.userId}/budgetGroup`);
    }
  </code></pre>