Why the onclick function not working in html -angular

Question

user.html:

<div class="bg-image" 
  style="background-image: url('./assets/Images/Homepage.jpg');
         height:100vh; position:fixed; min-width:100%; min-height:100%; background-repeat:no-repeat; background-size:cover">
         <mat-toolbar style="background-color:purple;" >
            <mat-toolbar-row>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;">HOME</span>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;cursor: pointer;" (click)="About()">ABOUT</span>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;">CLASSES</span>
             <span style="color:white; font-size:medium;padding:20px;margin-top:15px;">CONTACT US</span>
            </mat-toolbar-row>
         </mat-toolbar>
</div>

user.ts:

import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private router:Router) { 

  }

  ngOnInit(): void {
  }

  About()
  {
    this.router.navigate(['/about-page']);
  }

}

Clicking on about it is not navigating to about-page.In my about-page component i have given 1 line html as it works that all.

Answer 1

Try importing RouterModule

//app.module.ts
import {RouterModule} from '@angular/router';

@NgModule({
imports: [RouterModule]
});