CODEWITHSUNDEEP
angularmodal-dialogprimeng
BrianM
BrianM

Reputation: 115

Prime Modal will not open

I have created a prime NG modal in Angular 2. It should open when a button is clicked which calls out to the toggleDeleteModalDisplay method below, but it doesn't seem to open. Not sure what i am doing wrong as i have other modals in the code which are basically the same

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

@Component({
    selector: 'delete-user',
    templateUrl: './delete-user.component.html',
    encapsulation: ViewEncapsulation.None,
})

export class DeleteUserComponent {

    public deleteModalDisplay : boolean = false;

    public toggleDeleteModalDisplay() : void {
           this.deleteModalDisplay = !this.deleteModalDisplay;
    }

}
<p-dialog [(visible)]="deleteModalDisplay" [width]="500"
          [draggable]="false" [modal]="true" [dismissableMask]="true"
          class="delete-user-modal">
    <p-header class="header-modal">
        Delete User
    </p-header>
</p-dialog>

import { DeleteUserComponent } from './delete-user/delete-user.component';


@Component({
    templateUrl: './manage-users.component.html',
    styleUrls: ['./manage-users.component.less'],
})
export class ManageUsersComponent {
    constructor(public deleteUserComponent: DeleteUserComponent) {}

    public deleteUser() : void {
      this.deleteUserComponent.toggleDeleteModalDisplay();
    }
 }

Upvotes: 0

Views: 412

Answers (1)

Jon
Jon

Reputation: 116

It sounds like the DeleteUserComponent you're calling toggleDeleteModalDisplay() on is not the one that's in your view. Unless you're passing an instance of your component into your ManageUsersComponent, it's injecting a new one via its constructor that's separate from the one on your view.

Instead of injecting a DeleteUserComponent in the constructor, try using a ViewChild:

export class ManageUsersComponent {

    @ViewChild(DeleteUserComponent) deleteUserComponent: DeleteUserComponent;

    constructor() {}

    public deleteUser() : void {
      this.deleteUserComponent.toggleDeleteModalDisplay();
    }

 }

Upvotes: 1

Related Questions