Buttons inside ion-menu aren't working

Ionic Framework
1

I created a custome component for my side menu and I has wrape it with ion-menu like:

<ion-menu contentId="main">                                              
  <app-side-menu></app-side-menu>                            
</ion-menu>

Drag events are working and the menu is displayed, but the ion-buttons inside my component doesn’t fire the click event, I can’t select neigther the ion-input. I have to use a different component for this?.

2

I can’t understand the component without the code. But looks like what you lack <ion-router-outlet id="main"></ion-router-outlet>

1 Like
3

I am not usign the ion-router-outle, I am using it over another page component, and works, I mean the menu show up. This is my component app-side-menu:

<div class="contenido">
  <ion-list>
    <ion-item *ngFor="let set of setsList">
      {{set}}
      <ion-icon (click)="deleteSet(set)" slot="end" name="close-outline"></ion-icon>
    </ion-item>
  </ion-list>
  <div class="buttonBtn">
    <ion-buttons>
      <ion-input [(ngModel)]="newSet" class="inputSet" placeholder="New Set"></ion-input>
      <ion-button (click)="addSet()" >Add</ion-button>
    </ion-buttons>
  </div>
</div>

And is showing, but i can’t click the button or the input.

4

If I understood you correctly. You need to do the following. First create a file for example with the name need.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'need',
    template: `<div class="contenido">
  <ion-list>
    <ion-item *ngFor="let set of setsList">
      {{set}}
      <ion-icon (click)="deleteSet(1)" slot="end" name="close-outline"></ion-icon>
    </ion-item>
  </ion-list>
  <div class="buttonBtn">
    <ion-buttons>
      <ion-input #test class="inputSet" placeholder="New Set"></ion-input>
      <ion-button (click)="addSet(test)" >Add</ion-button>
    </ion-buttons>
  </div>
</div>`,
})
export class TestNeed {
    setsList: Array<number> = [];
    constructor() { }

    deleteSet(val) {
        //to do
        console.log(val)
    }
    addSet(test) {
        console.log(test.value)
        this.setsList.push(test.value)
    }
}

Next in app.module.ts add your class to exports, declarations.

@NgModule({
  declarations: [AppComponent, TestNeed],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
  exports: [TestNeed]
})

If you have a menu in app.component.html just write a component tag in my case 2021-09-08_20-22-49
2021-09-08_20-23-39

1 Like
5

I think this is a bad suggestion in general. One of the most tedious aspects of writing webapps is how many things that would be build-time errors in a sane ecosystem turn into runtime errors in JavaScript. This line exacerbates that situation greatly, by willfully disabling build-time syntax checks that help finding silly typos quickly.

1 Like
6

schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], I do not argue, I did not say that they need to be added, without this it will work. If I don’t understand something, can you please explain

1 Like
7

I’m just trying to discourage people from copy-pasting that specific part of your code, because it blinds the compiler to things that you generally want it to complain about.

1 Like
8

Now I understand what you mean by that. You are absolutely right, otherwise, sometimes copying without copying leads to big problems.

1 Like
9

I don’t really need all that, because my problem was I was trying to use the menu in a module, and not in the appcomponent, so I tried to bind it to a diferent component instead the router-outlet. Actually this is what I want to but I guess I cant dot like this for now at least. Thank you very much for your time.