As a final implementation step, let's implement a busy indicator on our page:
- Generate a BusyComponent component as part of the shared module with the following command:
ng generate component modules/shared/busy
- Replace the HTML file /src/app/modules/shared/busy/busy.component.html contents with the following:
<div class="loader-container">
<div class="loader"></div>
</div>
- Replace the CSS file /src/app/modules/shared/busy/busy.component.css contents with the following:
.loader-container {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
background-color: azure;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
- Export the component in SharedModule as follows:
…
@NgModule({
…
exports: [
…
BusyComponent,
],
})
export class SharedModule { }
- Import SharedModule into MarketModule:
…
import { SharedModule } from '../shared/shared.module';
…
@NgModule({
imports: [
…
SharedModule,
],
…
})
export class MarketModule { }
- Include the busy component in ProductsPageComponent while making HTTP calls using the following code:
...
export class ProductsPageComponent implements OnInit {
...
isBusy = false;
...
async ngOnInit() {
this.isBusy = true;
try {
this.categories = await this.categoriesService.loadCategories();
} finally {
this.isBusy = false;
}
}
async onCategoryChanged(category: Category) {
this.selectedCategory = category;
this.isBusy = true;
try {
this.products = await this.productsService.loadProducts(category.name);
} finally {
this.isBusy = false;
}
}
}
That's it! You have just completed creating the busy indicator, and with that, the page functionality in this chapter is complete.