Avoid delay when using `*ngIf` in Angular

Question

I have four tabs and the fourth one need to be displayed based on whether an API response is present or not. So I am using the following code.

<li *ngIf="notifications.length !=0">
    <a data-toggle="tab">Notifications</a>
</li>

So the problem with this is , it has a delay when before displaying the Notifications tab, if notifications response is present. The other tabs are rendered first and then after a small delay the notifications tab is rendered. How can I avoid this delay and show all the four tabs at the time of page loading ?

Disable the fourth one instead of deleting it from the DOM ? — user4676340
– user4676340, Commented Dec 18, 2018 at 9:58

Alex Beugnet · Accepted Answer · 2018-12-18 10:01:16Z

4

You could use a route resolver to access your page with your tabs.

The resolver allows to wait for a promise / observable to complete before allowing the navigation to a specific route. Using your API response call as the completion of your observable, you will be able to wait for the call to be finished to load your component.

This will cause a delay to display your page though; you might want to implement a loader or something like this on your page while it is resolving the route.

Here is an article with examples about resolvers : https://alligator.io/angular/route-resolvers/

answered Dec 18, 2018 at 10:01

Alex Beugnet

4,0714 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user4676340 Over a year ago

True, but it gives at delay for the whole page, while the OP asks for no delay. Not sure if it fits his needs, but definitely an answer worthy of an upvote.

Happy Coder Over a year ago

This will work for me. Will accept the answer once tested.

Happy Coder Over a year ago

There is one more thing. I actually call a service with some parameters and the service call is inside a function and it is called in ngOnInit(); So how can I pass these parameters to the resolver service call ?

Alex Beugnet Over a year ago

It depends from where those parameters come from. If it is from the route, you can get them the same way you do in your ngOnInit() function, if it is from another service you do an injection dependency in your resolver directly. If you still end-up in a stuck situation with your parameters, it probably means you have an architecture issue with your components and services. You shouldn't have any issue to retrive your parameters in your resolver.

Collectives™ on Stack Overflow

Avoid delay when using `*ngIf` in Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related