Creating a loader for a specific component in Angular based on the view

Creating a loader for each component view is crucial when loading data from an API. Here is the current structure of my components within my 

<app-main></app-main>
:

<app-banner></app-banner>
<app-data></app-data>
<app-users></app-users>

Now, I need to implement loaders for each component to show while data is being fetched from the API and hide once the data has been loaded.

The goal is to have individual loaders for banner, data, users, displaying them before the data is retrieved and hiding them afterwards. How can this be accomplished?

htmlcssangularcomponentsloader

Answer №1

create a 

<app-spinner></app-spinner>
element

ensure it is reusable

keep it nested within the 

<main-container></main-container>

in the ngOnInit() method of each component, hide the 

<app-spinner></app-spinner>
once the response is received

Answer №2

Consider utilizing the @Input decorator for your loader component:

@Component({
    selector: "app-loader",
    templateUrl: ["./app-loader.component.html"]
})
export default class LoaderComponent{
  @Input() isLoading: boolean = true;
  ...
}

Don't forget to include an if statement in your template.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come my directive is being updated when there are changes in a different instance of the same directive?

For the purpose of enabling Angular binding to work, I developed a straightforward directive wrapper around the HTML file input. Below is the code for my directive: angular.module('myApp').directive('inputFile', InputFileDirective); f ...

javascripthtmlangularjs

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...

javascripthtmlcss

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

How can I simplify this code to reduce its complexity? Sonarqube is flagging the error---> Refactor this method to reduce its Cognitive Complexity from 21 to the allowed 15. this.deviceDetails = this.data && {...this.data.deviceInfo} || {}; if (th ...

javascriptangularsonarqubekarma-jasminesonarlint

Should the refresh button be displayed once the animation finishes?

Can anyone provide guidance on how to write jQuery code that will reveal a hidden button after an animation is finished? The button should also be able to refresh the animation for the user to watch again. Check out this fiddle: http://jsfiddle.net/rabela ...

jquerycssanimationjquery-animate

Received a notification after submitting an HTML form

<html> <body> <form action="" method="GET> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> <?php if( $ ...

phphtml

Firefox inexplicably splits words in haphazard locations

Although I know about this question, the solution provided doesn't seem to work for me Firefox word-break breaks short words at random points Despite applying the recommended CSS property as shown in the screenshot, it appears that the latest versio ...

cssfirefox

What's preventing me from aligning this div in the center?

I'm trying to set up a layout with two centered columns for Tumblr posts on the left side, while keeping a sidebar on the right. Can someone help me achieve this? #wrapper /*applying styles for two columns*/ { display: inline-bloc ...

htmlcss

In React js, I wanted to display the animation specifically on the "add to bag" button for the added item

When I click the "add to bag" button, all other buttons also display the animation. How can I make sure that only the clicked button shows the animation? Any suggestions? <Table responsive> <thead> <tr> ...

javascriptcssreactjsanimation

I am seeking a method to display formatted document texts from a file located in the asset folder within an Angular HTML document as a pop-up

Text File Content -> <b>Test</b> Below is a snippet of Angular HTML I attempted: <embed src=".\assets\docs\about\BRANCH_MASTER.txt">--> <object data=".\assets\docs&bs ...

angularassets

What is the reason border property does not transition effectively?

I am trying to remove the border property after a certain period of time (1 second) and make it smooth. Here is what I have attempted: var elem = $('div').css({'border-top':'6px solid #FC9A24', 'border-le ...

javascriptjqueryhtmlcss

What is the best way to modify the colors of two specific elements using a combination of CSS and JavaScript

I am currently developing a browser-based game and have encountered an issue. Here is the relevant line of my HTML/PHP code: echo '<div id="div'.$n.'" class="d'.$rand.'" onclick="swapit(this.id, this.className)"></di ...

javascripthtmlcssbackground-color

Having trouble implementing table row selection with semantic-ui table

I am currently in the process of adopting Semantic-UI, but I am encountering some issues. Specifically, I am struggling to make row selection work in a table. Below is the sample HTML I am using from Semantic-UI: <table class="ui selectable celled tab ...

javascripthtmlcsssemantic-ui

Variations in spacing due to line breaks

Looking for a solution to my code formatting issue in HTML. Here is an example of my CSS: span{height:200px;width:200px;border-width:1px;border-color:black;border-style:solid;display:inline-block} This is how my HTML code looks before changes: <span& ...

html

How can JavaScript be used to remove HTML tags from text while preserving a space between each line?

I found a helpful solution on Stack Overflow for removing HTML from text content. This is the method it suggests: function strip(html){ let doc = new DOMParser().parseFromString(html, 'text/html'); return doc.body.textContent || "&quo ...

javascripthtml

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

javascriptphpjqueryhtml

jQuery regex failing to display latest changes

I am running into some issues with my custom jQuery snippet that is supposed to dynamically display the results. Each H2 tag contains an image, and I want to ensure the image is positioned correctly next to the word "test." Here is the script in question: ...

htmljqueryregex

Are the form fields and database table fields sharing identical names?

Do you think it is a poor practice to use the same name for HTML form fields as for table field names? I'm creating dynamic SQL insert queries and currently, I am using regular expressions to change the names to match the corresponding database fields ...

phpmysqlhtmldatabaseforms

Utilizing Angular Services to Share Events and Reusing Components Multiple Times on a Page

My unique custom table is made up of multiple components, each emitting events using a shared service called TableEvent. These events are subscribed to by a class named TableTemplate, which facilitates communication among the different components of the ta ...

angulartypescriptrxjs

Issue with preventDefault not functioning correctly within a Bootstrap popover when trying to submit a

I am facing an issue with a bootstrap popover element containing a form. Even though I use preventDefault() when the form is submitted, it does not actually prevent the submit action. Interestingly, when I replace the popover with a modal, the functional ...

javascriptjqueryhtmlformstwitter-bootstrap

The 'subscribe' property is not available on the type '() => Observable<any>'

File for providing service: import { Observable } from 'rxjs/Rx'; import { Http, Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export clas ...

angulartypescriptrxjsobservableangular2-services