implementation of loader in Angular 8 - angular8

Question

Can anyone help me in implementing loader as I am new in angular(angular 8). I am able to show sequence of data in section wise, but loader is being rotated whereas data has already been came up, but requirement is once data being displayed, loader must get removed.
<ng-container *ngFor=" let memoSectionName of memoData?.sections">
<div class="divhorizontalspacebetween greybg _1emgapbelow">
<div class="labelsmall weight700">{{memoSectionName?.display_name}}</div>
<!-- <div class="actionbutton">
<img src="./assets/images/actions-edit.svg" loading="lazy" alt="" (click)="openEditBasicInfo(); openEditSection('projectInfo')">
</div> --> </div> <ng-container *ngFor="let card_details of memo_card_details"> <div *ngIf="memo_list?.length != memo_card_details?.length" style="justify-content: center; align-items: center; display:flex">
<app-custom-loader>
</app-custom-loader>
</div>
<ng-container *ngFor="let card of card_details.card_data">
<ng-container *ngIf="card?.master_name == 'Project and Project Narrative' && card?.master_name == memoSectionName?.master_name">
<div>
<div>

Answer 1

Create a Loader Service
import { Injectable } from "#angular/core";
#Injectable({
providedIn: "root",
})
export class LoaderService {
constructor() {}
Show(div: string): void {
let findDiv = document.getElementById(div);
if (findDiv) {
document
.getElementById(div)
.insertAdjacentHTML(
"afterbegin",
`<div class="loader-holder"><div class="loader"></div></div>`
);
document.getElementById(div).classList.add("loader-mask");
}
}
Hide(div): void {
let findDiv = document.getElementById(div);
if (findDiv) {
let loader = this.FindLoader(div);
if (loader) {
loader.remove();
}
document.getElementById(div).classList.remove("loader-mask");
}
}
FindLoader(containerID): Element {
let elm = document.getElementsByClassName("loader-holder");
let parent: any = elm && elm.length > 0 ? elm[0].parentNode : {};
return parent.id && parent.id === containerID ? elm[0] : null;
}
}
In your HTML give an Id to your div where you want to apply loader
<div id="loader-display-id">
......
</div>
In your Typescript class Inject Service and call methods
LoaderId : string = "loader-display-id";
constructor(private loader : LoaderService)
{
}
getDetails() : void
{
this.loader.Show(this.LoaderId);
//Perform Necessary Actions
this.loader.Hide(this.LoaderId);
}