title: ngIf not working Angular 7 After first time
body: <p>here is HTML code</p>
  
  <pre><code>&lt;form class="k-form-inline" [formGroup]="catalogForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()"&gt;
       &lt;button class="k-button k-primary" style="width:100px" [disabled]="loading" style="margin-right:15px" &gt;
                &lt;span class="k-icon k-i-zoom" style="padding-right: 20px"&gt; &lt;/span&gt;Search
       &lt;/button&gt;
       &lt;span *ngIf="loading" class="k-icon k-i-loading" style="font-size: 16px; padding-left:10px"&gt;&lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>on component</p>
  
  <pre><code>public loading : boolean = false;
  
  onSubmit() {
      this.loading = true;
       this.Service.subscribe(res =&gt; {this.loading = false;})
  }
  </code></pre>
  
  <p><strong>EDIT</strong> : here is service code.</p>
  
  <pre><code>export class ProductService  extends BehaviorSubject&lt;GridDataResult&gt;{
  
  constructor(private http: HttpClient) 
    { super(null); }
  
  protected fetch(state: any, searchForm: ProductCatalogSearch,CustomerGroupCode : string): Observable&lt;GridDataResult&gt; {
      searchForm.CustomerGroupCode = CustomerGroupCode;
      return this.http
        .post&lt;any&gt;(this.rootURL + '/product/catalogsearch', searchForm)
        .pipe(
          map(response =&gt; (&lt;GridDataResult&gt;{
            data: response,
            total: (response as any[]).length
          }))
        );
    }
  
    public query(state: any, searchForm: ProductCatalogSearch, CustomerGroupCode: string): void {
      this.fetch(state, searchForm,CustomerGroupCode)
        .subscribe(x =&gt; super.next(x));
    }
  }
  </code></pre>
  
  <p>This works perfectly when i click button first time after loading/refreshing. after that it stops working in subsequent clicks. submit is working fine in any click, some reason the 'loading' variable is not changing.</p>
  
  <p>Am i missing anything? </p>