File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-store-finder-grid |
| templateUrl |
./store-finder-grid.component.html |
Methods
|
Protected
findStores
|
findStores()
|
|
|
|
|
|
isLoading$
|
Type : Observable<boolean>
|
|
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GeoPoint } from '@spartacus/core';
import { Observable } from 'rxjs';
import { StoreFinderService } from '@spartacus/storefinder/core';
@Component({
selector: 'cx-store-finder-grid',
templateUrl: './store-finder-grid.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StoreFinderGridComponent implements OnInit {
defaultLocation: GeoPoint;
country: string;
region: string;
locations$: any;
isLoading$: Observable<boolean>;
constructor(
private storeFinderService: StoreFinderService,
private route: ActivatedRoute
) {}
ngOnInit() {
this.isLoading$ = this.storeFinderService.getStoresLoading();
this.locations$ = this.storeFinderService.getFindStoresEntities();
this.defaultLocation = {};
this.findStores();
}
protected findStores(): void {
if (this.route.snapshot.params.country) {
this.storeFinderService.callFindStoresAction(this.route.snapshot.params);
}
}
}
<ng-container
*ngIf="
!(isLoading$ | async) && (locations$ | async) as locations;
else loading
"
>
<div class="container">
<div class="row">
<div
class="col-sm-6 col-md-4 col-lg-3 item"
*ngFor="let location of locations?.stores"
>
<cx-store-finder-list-item
[location]="location"
></cx-store-finder-list-item>
</div>
</div>
</div>
</ng-container>
<ng-template #loading>
<div class="cx-spinner"><cx-spinner></cx-spinner></div>
</ng-template>
Legend
Html element with directive