When it comes to using custom selectors, they are used the same as any prefabricated facade property or method. As a quick example, our prior two custom selections added to our CustomerFacade may be used as so:
customer-by-name.component.ts
@Component({
selector: 'app-customer-by-name',
templateUrl: './customer-by-name.component.html',
styleUrls: ['./customer-by-name.component.scss']
})
export class CustomerByNameComponent implements OnInit {
customer$: Observable<Customer>;
constructor(
private route: ActivatedRoute,
private customers: CustomerFacade
) {}
ngOnInit() {
// This may be called elsewhere instead of here
// i.e. dispatch a page loading or initializing action and
// load customers in an effect
this.customers.loadAll();
// This is component specific as it requires extracting information
// from the currently activated route, which is context-specific
this.customer$ = this.route.paramMap.pipe(
filter(params => params.has('name')),
map(params => params.get('name')),
switchMap(name => this.customerFacade.customerByName$(name))
);
}
}
