I'm currently working with Angular 8 to develop an application that retrieves responses from various APIs for users. The application is designed to simultaneously call multiple APIs and I require a loading indicator that stops once each API delivers a response. The response times for these APIs can range from a few seconds to a minute. How can I go about implementing this feature?
Take a look at this example I created on stackblitz: link
In this example, I have set up an Angular Material spinner and a tag where API results can be displayed in my template:
<button (click)="onFetch()" >Click me to send request</button>
<mat-spinner *ngIf="spin"></mat-spinner>
<p *ngIf="!spin">{{result}}</p>
The button triggers the request to the API.
As shown in the template, there is an ngIf condition for both the spinner and the result tag, to toggle between showing either the spinner or the result.
Upon clicking the button, the onFetch function is executed which displays the spinner by setting this.spin = true.
onFetch() {
this.spin = true
ajax.getJSON(this.url)
.pipe(
delay(1000)
)
.subscribe(json => {
this.spin = false
this.result = json.value
})
}
When the request completes and returns a result, this.spin = false is triggered, making the spinner disappear.
I am looking to create a table in HTML/CSS with 4 cells stacked on top of each other. I have a couple of questions: How can I set the width and height for each cell individually (with varying heights), while ensuring that there are no scroll bars if th ...
Having trouble finding the issue in my code. (I'm still new to nestjs and trying to learn by working on some apps). The console log is showing the following error: Nest can't resolve dependencies of the UrlsAfipService (?). Please ensure tha ...
Is there a way to maintain the alignment of text in the output of the 'About' section even when the content changes dynamically? I want the new line to appear just below 'Lorem', but currently, it shifts below the colon(:). Since the le ...
I've created a basic class structure like so: export class MessagesPage { @ViewChild(Content) content: Content; public message = ''; public messages = []; public state = 'general'; } Can I implement a way wit ...
One of the functions in my code is a post call: save2 : function ( lotto ) { var configDistintaIngrediente = { params: { distintaBaseGelato_id: 1, ingrediente_id: 2, quantit ...
Encountering a minor issue with the accordion/tab layout provided in this link: https://jsfiddle.net/drj3m5tg/ The problem is that on mobile, the "+" icon remains as "-" when opening and closing tabs. Also, in desktop view, sometimes tabs need to be clic ...
Looking to develop a component that incorporates multiple content projects in angular 6. Here's the code I used in app.component.html: <popup> <button buttonTrigger mat-button><span >Open the popup!</span></button> ...
I am currently working on an Angular application and I need to set up end-to-end testing for this project. Angular Package: 4.6.6 Protractor: 5.3.0 In addition, my project includes a multi-layer router that wraps the router-outlet into another component ...
My app is all set up to sell various items, with PayPal handling the payment process. In order to generate invoices, I need to access user details such as their name and address, which are stored by PayPal for each user. How can I retrieve this information ...
In my TypeScript backend project with Node as the target runtime, I have a JSON file that is auto-generated within my repository. I use the following code to import the JSON file in order to get the type of the JSON object: import countries from '../g ...
For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...
I have encountered a situation where I need to center text within a div that also has an aspect ratio. Since the aspect-ratio property is not supported by major browsers like Safari, I am looking for an alternative solution. Here is my current code: .a ...
Currently, I am developing a Portfolio website and have encountered an issue. While everything runs smoothly with npm run dev, the problem arises when I use npm run preview. In this scenario, some of the images within the files named 3dModellingFiles.ts do ...
Is there a way to keep text aligned next to an image without it dropping down and disrupting the layout of the article? * { margin: 0; box-sizing: border-box; } * a:link { text-decoration: none; ...
Encountering an error while attempting to fetch data from the API. See the error image here. export class UserService { baseurl: string = "https://jsonplaceholder.typicode.com/"; constructor(private http: HttpClient) { } listUsers(){ //this ...
I'm encountering an issue while attempting to define a specific type based on the value of an enum. enum E { A = "apple", B = "banana", C = "cherries" } // Defining the type EnumKey as 'A' | 'B ...
Let's look at a situation I'm facing. I have a user service that contains a BehaviorSubject and a method that returns an observable of this BehaviorSubject. Another file is the header component, which subscribes to this observable. The dilemma is ...
I am currently developing a hybrid app using Cordova and Ionic. My current challenge involves making an HTTP request to access a server where I need to modify the user agent of the device in order to pass a secret key. $http({ method: 'GET&a ...
Lately, I've been tackling a challenging issue with my Angular app - heavy computation on the client side leading to UI blockage. My solution? Utilizing Web Workers in my Angular CLI project to separate UI tasks into one thread and heavy processing in ...
I am looking to modify the color of the active page, Here is the HTML code snippet: <html> <head> <title>John Doe - Portfolio</title> <link rel="stylesheet" href="custom-style.css"> <link rel=" ...