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

Ionic Framework ionic-v3
1

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

Side-Menu.component.html

<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-avatar>
  </ion-row>
  <ion-row class="ion-justify-content-center">
    <h1>Hello User</h1>
  </ion-row>
</ion-grid>

<ion-list>
  <ion-item>
    <ion-icon name="people-outline" slot="start"></ion-icon>
    <ion-label>Groups</ion-label> 
  </ion-item>
  <ion-item>
    <ion-icon name="settings-outline" slot="start"></ion-icon>
    <ion-label>Settings</ion-label> 
  </ion-item>

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

Side-Menu.component.ts

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

app.component.html

<ion-app>
  <ion-menu side="start" contentId="main">
    <ion-content id="main">
      <app-side-menu></app-side-menu>
    </ion-content>
  </ion-menu>
  <ion-router-outlet></ion-router-outlet>
</ion-app>
2

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?

3

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.