Angular Material tab navigates to selected tab after ngOnInit

Question

I want to to navigate to new tabs and show loading spinner until search component gets data from api to display.

But tab navigates to selected item only after component has been loaded. Is there any way to change that?

If not how can I fire code block which I have inside `ngOnInit()' once the component is loaded

I have function to execute in search component which returns data. I want to display a spinner until data is available to display.

export class SearchComponent implements OnInit {
isLoading= true;
  constructor() { }

  ngOnInit() {
    console.log('loaded');
    // api call here to get data
    //show spinner untill we get response from api
    this.isLoading = false;
  }

}

<mat-spinner *ngIf="isLoading"></mat-spinner>

But now since I have it inside Oninit() tab navigates to search only after data is available. So there is a delay of 4-5 secs to navigate to those tabs

Stackblitz demo

what do you mean by "If not how can I fire events which I have inside `ngOnInit()' once the component is loaded" — canbax, Mar 02 '20 at 07:36
What do you mean by `component loads`? Are you referring to loading just UI or some data from API? — Mridul, Mar 02 '20 at 07:41
@canbax I have updated the question. I hope it makes sense now — IamGrooot, Mar 02 '20 at 08:10
@Mridul data from API.. Untill data is availabe I want to display a spinner — IamGrooot, Mar 02 '20 at 08:12
@NareshShetty, Do you want like this? https://stackblitz.com/edit/angular-material-tab-example-prsdpm .. If you click on the search tab, it loads data from api until then you will see ```mat-spinner```.. — Maniraj Murugan, Mar 02 '20 at 08:29
In the API call subscription once you get data you can make the flag isLoading to false. So till the time you don't have data loader will be shown. — Pujan Shah, Mar 02 '20 at 08:32
@NareshShetty, you need to take a boolean flag to show/hide spinner based on Api request and response. you should do that in your child component. — Mridul, Mar 02 '20 at 08:43
@Mridul showing spinner wasn't the issue. mat-tab wasn't navigating to the child component until it has the data. As suggested in `canbax` answer I am able to do it using `setTimeout()` in child component — IamGrooot, Mar 02 '20 at 09:05

canbax · Accepted Answer · 2020-03-02T08:25:46.793

1

You might use a variable on a service that is injected into all the components. For example, a variable like isLoading.

Check this variable on all the components or inside a parent component. If you show spinner on the parent component, you should also use the same service on the parent component. Show a spinner if it is loading.

inside ngOnInit() you can just make

setTimeout(() => { // do an async thing there
}, 0);

edited Mar 02 '20 at 08:25

answered Mar 02 '20 at 08:17

canbax

3,432
1
27
44

I want to show the spinner in child component. And child component is visible only after it has the data. since `mat-tab` navigates to selected tab content only after component loads completely. – IamGrooot Mar 02 '20 at 08:23

score 0 · Answer 2 · answered Mar 02 '20 at 08:34

The best way is to use a proper loader. NgxSpinner is the library which I have used in my application and its perfectly working fine.

Install library using this link

This is a demo link

These are all options provided by library, click here to see.

very simple and efficient!

Angular Material tab navigates to selected tab after ngOnInit

2 Answers2