Cacher is the code snippet organizer for pro developers

<ng-container *ngIf="!(loading$ | async); else loadingTpl">

  <input placeholder="Search Product.." [formControl]="search">

  <app-product *ngFor="let product of (products$ | async)" [product]="product"></app-product>

</ng-container>

<ng-template #loadingTpl>...</ng-template>

@Component({
  ...
})
export class ProductsComponent implements OnInit {
  products$: Observable<Product[]>;
  loading$: Observable<boolean>;
  search = new FormControl();

  constructor(private productsService: ProductsService, 
              private productsQuery: ProductsQuery) {}

  ngOnInit() {
    this.productsService.get().subscribe();
    
    this.loading$ = this.productsQuery.selectLoading();
    
    this.products$ = this.search.valueChanges.pipe(
      startWith(''),
      switchMap(value => this.productsQuery.selectAll({
         filterBy: entity => entity.title.toLowerCase().includes(value)
      }))
    );
  }
}