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