List isn't clickable in menu even after adding button tag

In the menu, I have created a list and want to add a click function but it isn’t working this way. Can’t find the problem. The menu displays fine


<ion-grid style="margin-top: 32px;" >
  <ion-row class="ion-justify-content-center" >
    <ion-avatar style="width: 100px; height: 100px;">
      <img src="../assets/profile.png">
  <ion-row class="ion-justify-content-center">
    <h1>Hello User</h1>

    <ion-icon name="people-outline" slot="start"></ion-icon>
    <ion-icon name="settings-outline" slot="start"></ion-icon>

// not clickable
  <ion-item button (click)="logOut()">
    <ion-icon name="log-out-outline" slot="start"></ion-icon>
    <ion-label>Log Out</ion-label> 


import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss'],
export class SideMenuComponent implements OnInit {
  constructor(public auth: AngularFireAuth) {
  ngOnInit() {}


  <ion-menu side="start" contentId="main">
    <ion-content id="main">

What happens if you hoist the contents of this component directly into the app-component.html markup? IOW, can we eliminate the possibility that this is caused by attempting to encapsulate stuff into SideMenuComponent?

Initially, I have put the content in app-component.html. It didn’t work. That’s the reason for creating a new component in the hope it may work.