File
Implements
Metadata
| selector |
cx-store-finder-stores-count |
| templateUrl |
./store-finder-stores-count.component.html |
|
isLoading$
|
Type : Observable<boolean>
|
|
|
|
locations$
|
Type : Observable<any>
|
|
|
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { StoreFinderService } from '@spartacus/storefinder/core';
@Component({
selector: 'cx-store-finder-stores-count',
templateUrl: './store-finder-stores-count.component.html',
})
export class StoreFinderStoresCountComponent implements OnInit {
locations$: Observable<any>;
isLoading$: Observable<boolean>;
constructor(private storeFinderService: StoreFinderService) {}
ngOnInit() {
this.storeFinderService.viewAllStores();
this.locations$ = this.storeFinderService.getViewAllStoresEntities();
this.isLoading$ = this.storeFinderService.getViewAllStoresLoading();
}
}
<ng-container
*ngIf="
!(isLoading$ | async) && (locations$ | async) as locations;
else loading
"
>
<div class="cx-count container">
<div class="row" *ngIf="locations?.length">
<div
*ngFor="let country of locations"
class="cx-set col-sm-6 col-md-4 col-lg-4 col-xl-3"
>
<a [routerLink]="['../country', country.isoCode]" class="btn-link">
<h2 class="cx-title">
<span
[ngClass]="
country?.storeCountDataList
? 'country-header'
: 'country-header-link'
"
class="cx-name"
>{{ country.name }}</span
>
<span
[ngClass]="
country?.storeCountDataList
? 'country-header'
: 'country-header-link'
"
*ngIf="!country?.storeCountDataList"
class="cx-country-count"
>({{ country.count }})</span
>
</h2>
</a>
</div>
</div>
<div class="row" *ngIf="!locations?.length">
<span class="cx-no-stores" role="alert">
{{ 'storeFinder.noStoresMessage' | cxTranslate }}
</span>
</div>
</div>
</ng-container>
<ng-template #loading>
<div class="cx-count-spinner"><cx-spinner></cx-spinner></div>
</ng-template>
Legend
Html element with directive