Show text inside div but treat it as a background image - html

Question

I'm trying to create a div which has the initial text loading... inside of it, and can later be overlapped by new elements that are loaded into it. Here's what I'm dealing with:
<div class="results" style="position:relative;" *ngIf="showResults">
<!-- show 'loading...' before the results load, which would then overlap this text -->
<div stlye="position: absolute; z-index: -1;">Loading ...</div>
<!-- angular2 loop to asynchronously load results -->
<div *ngFor="let loc of searchLocations | async" (click)="selectLocation(loc)" class="search-result">
{{ loc.name }}, {{ loc.adminName1 }}, {{ loc.countryCode }}
</div>
</div>
But when I run this, here's what I get something like
so my 'loading...' text has it's own boundry, when i want those proceeding elements to overlap ontop of that text. How can I accomplish something like this?

Answer 1

You could create a boolean for the loader.
export class YourClass(){
isLoading:boolean = true;
constructor(){
// Not sure how you are implementing your GET Request
// So no point in trying to replicate that, just where ever
// you assign searchLocations to an object
// fetch data logic ends with => {
isLoading = false;
}
}
}
Then in your html you just need to add an *ngIf
<div style="position: absolute; z-index: -1;"
*ngIf="isLoading">Loading ...</div>
You could even even make the loader a component to use anywhere, or you could hook into the showResults variable, as long as you place the loading div outside the showResults div with an attribute of *ngIf="!showResults" , which might mean a bit of a style tweek.