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 [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.

1

2 Answers

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 [width]="400" height="auto" [showTitle]="true" title="Partner" [dragEnabled]="false" [closeOnOutsideClick]="false" (onInitialized)="popupInitialized($event)"
>
</dx-popup>

Working example: Stackblitz

2

Add on you component constructor this line.

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.