I am currently working on a project, which can be found at this link.
Current Progress: I have implemented a mat tab group with tabs inside the app-component. When a tab is clicked, a specific component is loaded. Initially, most of the data is loaded in the app-component and then passed to the child components when a tab is clicked.
Desired Outcome: I want the link to add paths when clicking on a tab within the mat tab group. I believe by defining navbar paths, we can achieve this functionality in Angular.
Areas of Confusion: Although I am passing data to child components, I am unsure how to pass that data through the mat tab link. Specifically, I aim to create a navigation bar where clicking on a tab will change the path (e.g., localhost:4200/datatable), load the component, and pass data from the parent component. Currently, all mat tabs share the same link, but I plan on adding features that require reloading specific paths in the future.
Example Scenario: Upon entering the webpage, if a user clicks on the "datatable" tab, the path should change to localhost:4200/datatable. The app-component should then pass an object containing data for the datatable component to be correctly displayed under the respective tab.
My current implementation of mat tab:
<mat-tab-group animationDuration="0" (selectedTabChange)="onTabChanged($event)">
<mat-tab label="Add Expense" routerLink="/input">
<app-expense-input [badgeCounter] = "badgeCounter" (countChanged)="countChangedHandler($event)"></app-expense-input>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span matBadge={{badgeCounter}} matBadgeOverlap="false" matBadgeColor="accent">Datatable</span>
</ng-template>
<ng-template matTabContent>
<app-data-table [expensesList] = "expensesList" [badgeCounter] = "badgeCounter"
(countChanged)="countChangedHandler($event)"
(countReset)="countResetHandler($event)"></app-data-table>
</ng-template>
</mat-tab>
<mat-tab label="Chart">
<ng-template matTabContent>
<app-highcharts></app-highcharts>
</ng-template>
</mat-tab>
</mat-tab-group>
Attempted code for navigation:
<nav mat-tab-nav-bar [backgroundColor]="background">
<a mat-tab-link routerLink ="/input"> Input</a>
<a mat-tab-link routerLink ="/datatable">Datatable</a>
<a mat-tab-link routerLink="/chart">Chart</a>
</nav>
The navigation works well, but my challenge lies in figuring out how to pass data (such as [expensesList]) via the anchor tags.
Thank you in advance for your assistance. Apologies if this question has been asked before; I have searched extensively but couldn't find a solution.