popup is not showing on button click

Question

I'm using devextreme components in my angular web app. Now, I'm trying to show a popup, if the user clicks on a toolbar button. I bind the popup visibility to a boolean property in the component. The problem is, that the popup isn't showing. For test purposes, I added a simply alert message in the click event of the component and the message is showing. It means, that the click event is calling, but the popul will not show.

Here is the toolbar template:

<dx-toolbar>
  <dxi-item location="before" widget="dxButton"
            [options]="{text: 'Új partner', type: 'default', stylingMode: 'contained', icon: 'fas fa-plus', onClick: add_onClick}"
            >
  </dxi-item>
  <dxi-item location="center" text="Partnerek"></dxi-item>
</dx-toolbar>

The popup template:

<dx-popup
          id="entity-popup"
          [width]="400"
          height="auto"
          [showTitle]="true"
          title="Partner"
          [(visible)]="entityPopupVisible"
          [dragEnabled]="false"
          [closeOnOutsideClick]="false">
</dx-popup>

And here the component:

import { Component } from '@angular/core';
import { SenderRepository } from '../../repositories/sender.repository'
import { Sender } from '../../models/sender.model';

@Component({
  selector: "sender-table",
  templateUrl: "./senderTable.component.html"
})
export class SenderTableComponent {

  entityPopupVisible = false;

  constructor(private repo: SenderRepository) { }

  get senders(): Sender[] {
    return this.repo.senders;
  }

  public add_onClick() {
    this.entityPopupVisible = true;
    alert("onclick");
  }
}

What goes here wrong? Thank you.

Answer 1

The function mentioned in the template may not scope to the controller class. You could try to define the options object in the controller and bind the pop-up open/close using the onInitialized event of the pop-up. Try the following

Controller

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

import { DxPopupModule, DxButtonModule } from 'devextreme-angular';
import DxPopup from 'devextreme/ui/popup';
import DxButton from 'devextreme/ui/button';

@Component({
  styleUrls: ['app.component.css'],
  selector: 'demo-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public popup: DxPopup;
  public toolbarOptions = {
    text: 'Új partner', 
    type: 'default', 
    stylingMode: 'contained', 
    icon: 'fas fa-plus', 
    onClick: () => { this.popup.show() }     // <-- control pop-up here
  }

  popupInitialized(ev) {
    this.popup = ev.component;
  }
}

Template

<dx-toolbar>
  <dxi-item 
    location="before" 
    widget="dxButton"
    [options]="toolbarOptions"
  >
  </dxi-item>
  <dxi-item location="center" text="Partnerek"></dxi-item>
</dx-toolbar>

<dx-popup
  id="entity-popup"
  [width]="400"
  height="auto"
  [showTitle]="true"
  title="Partner"
  [dragEnabled]="false"
  [closeOnOutsideClick]="false"
  (onInitialized)="popupInitialized($event)"
>
</dx-popup>

Working example: Stackblitz

Answer 2

Add on you component constructor this line.

this.add_onClick = this.add_onClick.bind(this);