How to show "loading" screen

Question

Good afternoon, I am beginner in the angular and I have the following doubt:

It is possible to have a selector accessible in all my components?

I bring my component as follows:

import { CarregandoComponent } from '../carregando/carregando.component';
@Component({
selector: 'app-questions',
templateUrl: './questions.component.html',
styleUrls: ['./questions.component.css'],
entryComponents: [CarregandoComponent]
})

The problem is that in every html I want to load I must put the selector

<carregando[isRunning]="isRequesting"></carregando>

I would like to put it only in one place, I tried in index.html but it had no effect.

Can anyone help me? Thank you

Answer 1

You must create a service e.g CarregandoComponentService and carry it on your app.module. Thus it will become a Singleton in its application and any subcomponent will have access to the same instance of this service.

Then just load the component CarregandoComponent in your html app.component.html and use CarregandoComponentService to control this through the other components.

Load the service into the component that wants to use it and you will have control of the CarregandoComponent.