I am using a list `ul` that displays data from the array the array is initially empty for which I have used another template "empty" template here is the code:

```html
<ul class="list-group" *ngIf="data else empty">
  <li *ngFor="let num of data">
    <span>{{num}}</span>
  </li>
</ul>

<button class="btn btn-sm btn-primary" (click)="fillData()">Fill</button>
<button class="btn btn-sm btn-primary" (click)="clearData()">clear</button>

<ng-template #empty>
  <span>.... list empty....</span>
</ng-template>
```

Now script for the above code is as follows

```js
export class QlistComponent implements OnInit {

  data: any[];

  fillData() {
    this.data = [1, 2, 3];
  }

  clearData() {
    this.data = [];
  }

}
```

**Problem:** For some weird reason The **#empty** template gets triggered only once at the beginning when data is empty but once the data is filled `fillData()` and then cleared again `clearData()` the **#empty** template wont get triggered