angular routing with mat-toolbar not working

Issue

I am trying to call up 3 different tabs using angular-routing. I use a mat-toolbar for the display. I followed the steps from a youtube tutorial https://www.youtube.com/watch?v=ADEZTrIxj1k&ab_channel=TechnophileProgBox .

While I was programming, the navigation worked with a component. Now it no longer works with any of them.

I have searched for a solution on Stackoverflow and found nothing, can you please help me?

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

navbar.component.html

<mat-toolbar color="primary" class="mat-elevation-z8">
    <span><mat-icon>euro_symbol</mat-icon> Rechnungen</span>
    <div class="spacer"></div>
    
    <a mat-button router-link="/customers">Kunden</a>
    <a mat-button router-link="/articles">Artikel</a>
    <a mat-button router-link="/invoices">Rechungen</a>

</mat-toolbar>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomersComponent } from './customers/customers.component';
import { InvoicesComponent } from './invoices/invoices.component';
import { ArticlesComponent } from './articles/articles.component';

const routes: Routes = [
  {path: 'invoices', component:InvoicesComponent},
  {path: 'articles', component:ArticlesComponent},
  {path: 'customers', component:CustomersComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavbarComponent } from './navbar/navbar.component';
import { ArticlesComponent } from './articles/articles.component';
import { InvoicesComponent } from './invoices/invoices.component';
import { CustomersComponent } from './customers/customers.component';


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    ArticlesComponent,
    InvoicesComponent,
    CustomersComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule, //import mattoolbar 
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

``folder structure`

Solution

It seems like you have a typo: router-link should be routerLink

Answered By - Daniel Sprohar