1

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.

derstauner
  • 1,478
  • 2
  • 23
  • 44

2 Answers2

0

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

ruth
  • 29,535
  • 4
  • 30
  • 57
  • It works as expected, but I don't untersand one thing. Why works it on this link only with the visible property: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Popup/Overview/Angular/Light/ – derstauner Jun 14 '20 at 12:27
  • In the example the callback is directly bound to a button element callback, but here it's bound to the options object as a callback property. So probably it isn't writing the values using the two-way binding to the `visisble` property of the `dx-popup` element. – ruth Jun 14 '20 at 13:51
0

Add on you component constructor this line.

this.add_onClick = this.add_onClick.bind(this);
Link14
  • 896
  • 1
  • 15
  • 33
marlon diaz
  • 43
  • 5