How To Avoid Multiple API Calls At Once
Posted By : Rohit Goyal | 27-Dec-2017
INTRODUCTION:-
Nested routing is generally used for child views or you can say that it used in partial views.But the most benefit of using nested routing is that you can save your API calls loaded at the page once.
USE CASE : -
In your app, if you having tab structure and you have multiple tabs, then, in this case, you have to get the data of all tabs at once because you are not using any child routing. That in terms become very bad practice and
Step.1 - Add below code to your app.module.ts,
import {WalletManagementComponent} from './wallet-management/wallet-management.component';
import {WithdrawBtcComponent} from './wallet-management/withdraw-btc.component';
import {WithdrawalHistoryComponent} from './wallet-management/withdrawal-history.component';
import {DepositDeductHistoryComponent} from './wallet-management/deposit-deduct-history.component';
const appRoutes: Routes = [
{ path: 'wallet-management', component:WalletManagementComponent,
children:[
{ path: '', redirectTo: 'withdrawal-history', pathMatch: 'full' },
{ path: 'withdraw-btc', component:WithdrawBtcComponent},
{ path: 'withdrawal-history', component:WithdrawalHistoryComponent},
{ path: 'deposit-deduct-history', component:DepositDeductHistoryComponent}
]
}
]
}
];
@NgModule({
declarations: [
WalletManagementComponent
WithdrawBtcComponent,
WithdrawalHistoryComponent,
DepositDeductHistoryComponent
],
bootstrap: [ AppComponent]
})
first of all, we have to import all the parents and its child component and we have to define its routes.In this we have to declare one child as a default child.So, that by default
that child state will show when we comes to parent component path.It the end we have to declare the components in declaration section.
Step.2 - Define child routes in parent component html
<div class="tabs-cover clearfix">
<a [routerLinkActive]="['active']" [routerLink]="['./withdrawal-history']">Withdrawal History</a>
<a [routerLinkActive]="['active']" [routerLink]="['./withdraw-btc']">Withdraw BTC</a>
<a [routerLinkActive]="['active']" [routerLink]="['./deposit-deduct-history']">Deposit Deduct History</a>
</div>
other then it you have to make child components and define its html also you have to make parent component normally as you have already made other component.
That's it. On clicking on tabs you interchange state and you use ngOnInit() method every time when a state is changed to get the data.In this way, you can reduce API calls by using nested routing.
If you have any query on concerns you can contact me at my skype Id:- rohit.oodles
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.