Не могу использовать метод в div onclick

Question

У меня есть один angular образец, ниже мой app.component.ts файл:

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
  title = 'Core Helper';
  
  constructor(private router: Router) { 
    // this.router = Router;
  }

  navigate() {
      this.router.navigate(["docs"]);
  }
  }

app.component. html

<div id="releasenotes" onclick="navigate()">Release Notes</div>

Когда я вызываю этот метод, он выдает ошибку ниже:

dashboard:27 Uncaught ReferenceError: navigate is not defined
    at HTMLDivElement.onclick (dashboard:27)

Я не знаю, как решить эту проблему, я пробовал, как показано ниже

 document.getElementById('releasenotes').addEventListener("click", this.navigate);

В этом случае маршрутизатор получил неопределенное значение

Answer 1

Синтаксис angular для обработчика щелчков записывается как (click) = "methodName ()"

Измените app.component. html код с

<div id="releasenotes" onclick="navigate()">Release Notes</div>

до

<div id="releasenotes" (click)="navigate()">Release Notes</div>