I've been attempting to use the router link attribute to redirect to a new page, but instead of landing on the expected page, I keep getting redirected to the dashboard. Below is an overview of how my project's structure looks:
[![enter image description here][1]][1]
Routing-module file
children: [
{
path: '',
redirectTo: 'cards',
},
{
path: 'transactions',
component: TransactionsComponent,
data: {
title: 'Transactions',
},
},
{
path: 'recon',
component: ReconciliationComponent,
data: {
title: 'Reconciliation',
},
},
{
path: 'coa',
component: CoaComponent,
data: {
title: 'Chart of Accounts',
},
},
{
path: 'miscreceipt',
component: MiscpaymentComponent,
data: {
title: 'Misc Receipt',
},
}
],
},
{
path: 'miscpayment',
component: MiscpaymentComponent,
data: {
title: 'Misc Payment'
}
},
(The above routes were arranged this way as a test, otherwise they would have been listed below one another)
HTML file:
<c-container>
<c-row>
<c-col>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button cButton color="info" shape="rounded-pill" variant="outline" class="me-md-2" routerLink="/accounting/miscpayment" >New Misc Payment</button>
<button cButton color="info" shape="rounded-pill" variant="outline" routerLink="/miscreceipt">New Misc Receipt</button>
<button cButton color="info" shape="rounded-pill" variant="outline">Add Journal Transaction</button>
<button cButton color="info" shape="rounded-pill" variant="outline">Upload a Bank Statement</button>
<!--<button (click)="toggleCollapse()" cButton color="info" shape="rounded-pill" variant="outline" cDropdownToggle>More</button>
<ul cDropdownMenu>
<li><a [routerLink] cDropdownItem>Add Journal Transaction</a></li>
<li><a [routerLink] cDropdownItem>Upload a Bank Statement</a></li>
</ul>-->
</div>
</c-col>
</c-row>
</c-container>
I have tried various methods to redirect with no success. One other approach I attempted was:
<button cButton color="info" shape="rounded-pill" variant="outline" class="me-md-2" (click) = "onClick()" >New Misc Payment</button>
In the Component file implementation of onClick():
import {Router} from '@angular/router';
@Component({
selector: 'app-transactions',
templateUrl: './transactions.component.html',
styleUrls: ['./transactions.component.scss']
})
export class TransactionsComponent {
constructor(private route:Router) { }
ngOnInit(): void {
}
onClick(){
this.route.navigate(['/miscpayment']); // navigate to other page
}
}
Even after trying both alternatives, I am still unable to manage the redirection properly and it consistently directs me back to the dashboard.