Can't destroy on ngAfterViewInit

[pacocom]

Bug, feature request, or proposal:

I want a conditional destroy popover on ngAfterViewInit or better if it possible open popoverDiscount only with programmable code WITHOUT using mdePopoverTriggerFor.

<mat-toolbar color="primary">
  <h1>Angular Material Popover Example</h1>
  <div class="fill-space"></div>
  Popover is  <span class="popover-status">{{ popoverDiscountTrigger.popoverOpen ? 'opened' : 'closed' }}</span>
</mat-toolbar> 

<mde-popover
    #popoverDiscount="mdePopover"
    [mdePopoverOverlapTrigger]="false"
    [mdePopoverCloseOnClick]="false"
>
    Conditional popoverDiscount
    <button class="icon-popover-close" (click)="popoverDiscountDestroy()">Close</button>
</mde-popover>

<button
    #popoverDiscountTrigger
    [mdePopoverTriggerFor]="popoverDiscount"
    mdePopoverTriggerOn="click"
    [mdePopoverBackdropCloseOnClick]="false">
    POPOVER CLICK
</button>

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MdePopoverTrigger } from '@material-extended/mde';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 8';

  @ViewChild(MdePopoverTrigger, { static: true }) popoverDiscountTrigger: MdePopoverTrigger;

  ngAfterViewInit(): void {
    const condition = false;

    if (condition) {
      this.popoverDiscountTrigger.openPopover();
    } else {
      this.popoverDiscountTrigger.destroyPopover();
      // NO!, Not destroy popoverDiscountTrigger
    }
  }

  popoverDiscountDestroy(): void {
    this.popoverDiscountTrigger.destroyPopover();
    // YES!, destroy popoverDiscountTrigger
  }
}

What is the expected behaviour?

I want to destroy popoverDiscount on ngAfterViewInit or Toggle popoverDiscount without directive mdePopoverTriggerFor, that is, only with programmable code.

What is the current behaviour?

In the code above if condition is false don't destroy popoverDiscount, that is, if I click on button #popoverDiscountTrigger, the popover appears:

What are the steps to reproduce?

Provide a working example using StackBlitz (or similar) to reproduce the problem. https://stackblitz.com/edit/mde-popover-rlehwh

What is the use-case or motivation for changing an existing behaviour?

Because I want total control to open, close or destroy popover using programmable code.

Which versions of Angular, Material-Extended, OS, TypeScript, browsers are affected?

Angular 8

"dependencies": {
  "@angular/animations": "^8.1.1",
  "@angular/cdk": "^8.0.2",
  "@angular/common": "^8.1.1",
  "@angular/compiler": "^8.1.1",
  "@angular/core": "^8.1.1",
  "@angular/forms": "^8.1.1",
  "@angular/material": "^8.0.2",
  "@angular/platform-browser": "^8.1.1",
  "@angular/platform-browser-dynamic": "^8.1.1",
  "@angular/router": "^8.1.1",
  "@material-extended/mde": "^2.3.1",
  "@mdi/font": "^3.8.95",
  "@nrwl/angular": "^8.2.0",
  "axios": "0.19.0",
  "bulma": "^0.7.5",
  "core-js": "^3.1.4",
  "express": "4.17.1",
  "form-data": "2.5.0",
  "hammerjs": "^2.0.8",
  "html5shiv": "^3.7.3",
  "material-design-icons": "^3.0.1",
  "normalize.css": "^8.0.1",
  "respond.js": "^1.4.2",
  "rxjs": "~6.5.2",
  "rxjs-compat": "^6.5.2",
  "web-animations-js": "^2.3.2",
  "zone.js": "^0.9.1"
},

Other Comments

Very Thank!

[joejordanbrown]

@pacocom

I will find some time to work on a pull request for this soon, and I'll update you once it's published.

[kostia-lev]

@joejordanbrown @pacocom It is possible to open popover pragmatically. Though, you have to use MdePopoverTrigger on the target element. The you use mdePopoverTriggerOn="none", if you want it to not open by any event and you are done. There is not obligation mdePopoverTriggerOn to open popover. I added and example below, you can use togglePopover(); or openPopover or closePopover(). So I don't think there is any work to be done here. import { ChangeDetectionStrategy, Component, OnInit, ViewChildren } from '@angular/core'; import { MdePopoverTrigger } from '@material-extended/mde';

@Component({ selector: 'page-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class HomeComponent implements OnInit {

constructor() { } @ViewChildren(MdePopoverTrigger) dirs; public counter = 0;

ngOnInit() { setInterval(() => { this.counter++; console.log(this.counter, ' call'); this.dirs.first.togglePopover(); }, 3000); }

}

[kostia-lev]

Still added a pull request, probably someone will need to call destroy when is it is not active

[joejordanbrown]

@kostia-lev

Thanks for the pull request. I will review it once I've pushed all our latest changes that include a lot of bug fixes.

[ZhidkovGV]

Is this issue still presented? Seems like pr was closed 🙂