How to navigate without global spinner in nebular?

Question

I working on the nebular ngrx-admin template. There is a global spinner. which is loading while navigating from the header to a new page(component). I want to hide that spinner(no needed while navigating or loading new pages) only for particular components.

My header has a link like as below

<nb-action class="control-item "><a class="nav-links" href="home">Home</a></nb-action>

Spinner in index.html

<div id="nb-global-spinner" class="spinner">
    <div class="blob blob-0"></div>
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>
    <div class="blob blob-4"></div>
    <div class="blob blob-5"></div>
  </div>

I have tried the following methods,

Method: 1 in custom.component.ts

ngOnInit(): void {
    const el = document.getElementById('nb-global-spinner');
    if (el) {
      el.style['display'] = 'none';
    }
  }

Method: 2 in custom.component.scss

.spinner{
  display: none;
}

score 0 · Answer 1 · answered Dec 03 '20 at 18:19

0

if .spinner is the name of the class of the nb-global-spinner component then in your css try:

.spinner ::ng-deep {
   display: none;
}

or just in case:

.spinner ::ng-deep {
   * {
      display: none;
   }
}

answered Dec 03 '20 at 18:19

misha1109

358
2
5

The spinner is not in any component. It is in my index.html file. I have tried with your code in my component inside one of the module. But it is not working – Udhayakumar Dec 11 '20 at 07:31
i see, why do you have it in your index.html file and not app.component.html? If you would have it in app.component.html you can use viewChild for the spinner instead of the id, and change its style in the so-called Angular way – misha1109 Dec 11 '20 at 09:14
Your method 1 maybe could work if you get the id of the element in ngAfterViewInit instead of ngOnInit. But again you are working with Angular, putting components in index.html doesnt seem right to me at all... – misha1109 Dec 11 '20 at 09:17

Udhayakumar · Accepted Answer · 2020-12-15T07:07:15.753

The spinner is showing only on clicking the below one

<nb-action class="control-item "><a class="nav-links" href="home">Home</a></nb-action>

I have fixed it by changing it as

<nb-action class="control-item "><a class="nav-links" [routerLink]="['/home']">Home</a></nb-action>

Href is the basic attribute provided by Html to navigate through pages which reloads the page on click.

routerLink is the attribute provided by angular to navigate to different components without reloading the page.

How to navigate without global spinner in nebular?

2 Answers2