Main tabs
Component: <pcp-main-tabs>
Preview:
Description
This component provides the main tabs of the application, allowing users to navigate between different pages using tab buttons as references. It serves as the primary navigation mechanism for the application.
Usage
import { PcpMainTabsComponent } from '@celerofinancas/pcp-client-ui';
<pcp-main-tabs
[activeTabIndex]="0"
(currentTabChange)="currentTabChange($event)"
(availableTabs)="availableTabs($event)"
/>
Inputs
| Name | Type | Default | Description | Required |
|---|---|---|---|---|
activeTabIndex | number | The current tab index that is active | YES |
Outputs
| Name | Type | Description |
|---|---|---|
currentTabChange | TabsOptions["routerLink"] | Emitted when the user selects a different tab |
availableTabs | TabsOptions | Emitted when the request to user authorizations completes, it will emit the current tabs available for the current user |
Dependencies
- @celerofinancas/design-system
- @celerofinancas/ui-loaders
Notes
The availableTabs output emits its event only once, during the ngOnInit lifecycle hook. This occurs as soon as the component initializes and requests the user's authorizations from the server.