ANGULAR.js passing function from one component to another

Question

I am trying to build a pokedex project with angular 12.

I want to pass a openDialog() function in my pokemon-list.component.html

but openDialog() is defined in a separate component called Dialog. I've attached the project structure below.

This is the error I get: (index):1 Uncaught ReferenceError: openDialog is not defined at HTMLButtonElement.onclick ((index):1)

this is what i have done : in my html document of list component

<button id="button" onclick="openDialog()">More Stats</button>

and in dialog.component.ts

import { Component } from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import { BehaviorSubject } from 'rxjs';



@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class dialogComponent {

  constructor(public dialog: MatDialog) { }

  public openDialog() {
    this.dialog.open(dialogComponent);
    
  }
}

my final goal is to show a dialog after clicking the button

Answer 1

If this code is in pokemon-list.component.html :

<button id="button" (click)="openDialog()">More Stats</button>

then, I think this function:

public openDialog() {
    this.dialog.open(dialogComponent);
}

Should be in the pokemon-list.component.ts. That way, when the button is clicked, the openDialog function will be called and open the dialogComponent.