How to make a “loading” screen in angular 2

Question

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

Is it possible to access a selector in all my components?

I bring my component as follows:

Import {DownloadComponent} from '../loading/carregando.component';
@Component({
   Selector: 'app-questions',
   TemplateUrl: './questions.component.html',
   StyleUrls: ['./questions.component.css'],
   EntryComponents: [LoadingComponent]
})

The problem is that in any html that I want the cost I should put the selector

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

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

Does anyone know how to help me? Thank you

Answer 1

You need to import the loading component and set it as the child of the component where you need to use it by including it in the directives array in @Component selector.

This makes sense from angular 2 point of view and makes it a lot modular. To use it, import it in your class and include it in directives array. Then, use the selector in your template. You can't use a selector everywhere without importing.

Answer 2

Complementing what Bharat said, do you put your component in app.module.ts too? You should include it in your @NgModule.declarations and next include it in the component that you want to use.

Answer 3

You can add your loader to the root component of your application and add the selector only once in the template of the root application.

After this is done you can show/hide your loading component using a service.

Your service would look something as follows:

@Injectable()
export class LoaderService{
    //BehaviorSubject takes an initial value false in this case and 
    //provides the most recent value where ever it has been subscribed to.  
    isRequesting: BehaviorSubject<boolean> = new BehaviorSubject(false);
    public setIsRequesting (bool:boolean){
        this.isRequesting.next(bool);
    }
    pubilc getIsRequesting: BehaviorSubject<boolean>{
        return this.isRequesting;
    }
}

In your root component subscribe to the BehaviorSubject as follows:

export class AppComponent{
    isRequesting: boolean = false;
    constructor(private loaderService: LoaderService)
    ngOnInit(){
        loaderService.getIsRequesting().subscribe(value=>{
            this.isRequesting = value;
        })
    }
}

Your root html template:

<loading [isRunning]="isRequesting"></loading>
<router-outlet></router-outlet>

Now you can hide/show your loader using the LoaderService from your other components as follows:

//make loader visible
loaderService.setIsRequesting(true);
//make loader hide
loaderService.setIsRequesting(false);

Exapmle:

https://plnkr.co/edit/CYjDlLwmTRdYd7o5hMKS?p=info

Hope this helps.