joejordanbrown/popover

Angular CDK Popover, no default style, examples using @angular/material

Angular Popover

Links

Popover Demo | StackBlitz Template

Project status

Angular Popover is production ready.

This was originally created as an example for a @angular/material issue feature request. Issue can be found at angular/material2#2691

If you'd like to contribute please create an issue or pull request.

Examples

Material theme picker

Standard popover

Google+ style popover

Installation

Install npm package using:

yarn add @material-extended/mde or npm install @material-extended/mde

Install required packages @angular/cdk

yarn add @angular/cdk or npm install @angular/cdk

Initial setup

The CDK overlays depend on a small set of structural styles to work correctly. If you're using Angular Material, these styles have been included together with the theme, otherwise if you're using the CDK on its own, you'll have to include the styles yourself. You can do so by importing the prebuilt styles in your global stylesheet:

@import '~@angular/cdk/overlay-prebuilt.css';

Import module

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { MdePopoverModule } from '@material-extended/mde';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MdePopoverModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Todo

1. A design document needs creating to finalise requirements and API specifications. Once a document is created the component can be refactored and released as beta for testing.
2. Refactor now that @angular/cdk is released.

Available features

Feature	Notes	Docs
popover	In-progress (popover demo)	Docs

Issues

Please report bugs and issues here.

License

MIT © Joe Jordan Brown

Angular Popover by UIXD

popover's Issues

How to keep that popover open on click ?

MdePopover on top MatDialog

I have the same problem, any solution?

I am using MatDialog https://material.angular.io/components/dialog/api and MdePopover https://github.com/joejordanbrown/popover/blob/master/projects/material-extended/mde/src/lib/popover/popover.md

I want MatDialog on top of MdePopover

Very Thank!

Error: No provider for InjectionToken DocumentToken!

Hi!

From version 0.1.0-alpha.4 I'm not able to use the library. In the console the following error is displayed:

Error: No provider for InjectionToken DocumentToken! at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) at resolveNgModuleDep (core.es5.js:9473) at _createProviderInstance$1 (core.es5.js:9490) at resolveNgModuleDep (core.es5.js:9469) at _createClass (core.es5.js:9512)

Example plunker is here: http://plnkr.co/edit/aPIU6S887nGhTkDoZZ3Q?p=preview (it's the same as for issue #2, only the version has changed)

button click event inside the the popover content

I have a small form with 'cancel' and 'submit' button inside the popover. i am trying to close the popover after user submit the form. i tried many ways which is explained in the popover. unfortunately it didn't work. is there any work around on this scenario?

TS file

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  flag = false
  cancelPopover(e){
    this.flag = true
  }
}

Html file

<div class="container">
  <button mat-raised-button color="primary"
    [mdePopoverTriggerFor]="appPopover" mdePopoverTriggerOn="click" [mdePopoverCloseOnClick]="flag">
    Show Popover
  </button>
  <mde-popover #appPopover="mdePopover">
    <mat-card style="max-width: 300px">
      <mat-card-content>
      A material design popover component
      </mat-card-content>
      <button (click)="cancelPopover($event)">Cancel</button>
    </mat-card>
  </mde-popover>
</div>

Add argument "backdrop disable"

Bug, feature request, or proposal:

Add argument "backdrop disable"

What is the expected behaviour?

if this argument true, cdk-overlay-backdrop not show

Other Comments

I need to disable backdrop, it would be great if it were possible to disable not only the click on the backdrop, but the backdrop itself. Or perhaps you know how to do it now? Anyway, thanks for the good library.

Error with AOT Build

Bug, feature request, or proposal:

if I enable the property fullTemplateTypeCheck as recommended by https://angular.io/guide/aot-compiler#fulltemplatetypecheck

I receive the following error:

ERROR in node_modules\@material-extended\mde\mde.d.ts.MdePopover.html(1,105): : Property '_classList' is private and only accessible within class 'MdePopover'.

What is the expected behaviour?

no error

What is the current behaviour?

build fails

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

 "@angular/compiler": "^5.2.5",
 "@material-extended/mde": "^1.0.0-alpha.6",

ng build --prod crashes

Bug, feature request, or proposal:

Bug

What is the expected behaviour?

What is the current behaviour?

With material-extended/mde installed, ng build --prod crashes at 10%:
10% building modules 7/7 modules 0 active

The process just exists with no error.
Without aot everything works.
Without this library installed everything works.

What are the steps to reproduce?

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

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

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

Other Comments

Feature: Add an option to disallow popover from closing when clicked outside of its body

Bug, feature request, or proposal:

Feature Request

What is the expected behaviour?

Have the popover stay opened when the user clicks outside of popover body

What is the current behaviour?

Popover will close when the user clicks anywhere on the page outside the popover.

What are the steps to reproduce?

This is reproducible on the demo page:
https://uixd.co.uk/open-source-software/material-extended/demo/

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

mdePopoverCloseOnClick input directive allows popover to stay open when the user clicks inside the popover body. A similar option should be given to have the popover persist to prevent the popover from closing when the user clicks anywhere else. This is especially important when the popover can contain complex forms / buttons etc. to which the users must interact with.

feature: Absolute position

Bug, feature request, or proposal:

Feature

What is the expected behaviour?

Be able to (absolute) position popover.
Have possibility to absolute position popover. Or move it relative to the element at least.

What is the current behaviour?

Position is bound a dom element (I agree there is functionality making use of it)

What are the steps to reproduce?

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

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

I need to show popup for svg elements.

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

Other Comments

Access Mde Popover component form an other component

feature request, or proposal:

How to access the mde-popover with button template reference outside the component?

What is the expected behaviour?

<button mat-raised-button color="primary"
[mdePopoverTriggerFor]="appPopover"
mdePopoverTriggerOn="click">
Show Popover

What is the current behaviour?

I was trying to call [mdePopoverTriggerFor] form a custom button I have in a card component.
But, It is giving me an error message saying #appPopover reference must be inside the popover component I am creating. Is there any way to seperate "button" used to trigger the popover from outside the template of popover component.
My popover shouldn't have button inside the component. If so, there is a tight coupling between button and mde popover.

What are the steps to reproduce?

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

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

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

Other Comments

is there an event for opened?

what is the event for opened?

Could not resolve './popover-module' from dist/material-extended/mde/esm2015/public-api.js

Bug, feature request, or proposal:

Bug

What is the expected behaviour?

The library should compile when running npm run build:library

What is the current behaviour?

The library does not compile

`> @material-extended/[email protected] build:library /Users/andreipopa/skyborg-app/node_modules/@material-extended/mde

ng build @material-extended/mde

Building Angular Package
Building entry point '@material-extended/mde'
Compiling TypeScript sources through ngc
Bundling to FESM2015

BUILD ERROR
Could not resolve './popover-module' from dist/material-extended/mde/esm2015/public-api.js
Error: Could not resolve './popover-module' from dist/material-extended/mde/esm2015/public-api.js
at error (/Users/andreipopa/skyborg-app/node_modules/@material-extended/mde/node_modules/rollup/dist/rollup.js:3460:30)
at /Users/andreipopa/skyborg-app/node_modules/@material-extended/mde/node_modules/rollup/dist/rollup.js:21850:25
at

Could not resolve './popover-module' from dist/material-extended/mde/esm2015/public-api.js
Error: Could not resolve './popover-module' from dist/material-extended/mde/esm2015/public-api.js
at error (/Users/andreipopa/skyborg-app/node_modules/@material-extended/mde/node_modules/rollup/dist/rollup.js:3460:30)
at /Users/andreipopa/skyborg-app/node_modules/@material-extended/mde/node_modules/rollup/dist/rollup.js:21850:25
at
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @material-extended/[email protected] build:library: ng build @material-extended/mde
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @material-extended/[email protected] build:library script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

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

`Angular CLI: 7.0.5
Node: 9.11.1
OS: darwin x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.10.5
@angular-devkit/build-angular 0.10.5
@angular-devkit/build-ng-packagr 0.10.5
@angular-devkit/build-optimizer 0.10.5
@angular-devkit/build-webpack 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
ng-packagr 4.4.0
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1`

Other Comments

Used @Harry2510 fork, but the behavior appears on the main package as well. The package doesn't automatically compile when installing either because of this problem.

Bug: CdkTrapFocus broken

Bug:

CdkTrapFocus broken

What is the expected behaviour?

When popover contains a focusable element it should focus to the first focusable item or the item with the cdkFocusInitial attribute.

What is the current behaviour?

Not working because of the CdkTrapFocus on popover.html#L7 setting uses a string cdkTrapFocus="focusTrapEnabled" and not variable [cdkTrapFocus]="focusTrapEnabled".

What are the steps to reproduce?

See the popover theme selector demo, on popover open it should focus onto the current theme selection.

Feature request : option to remove all card decoration

feature request :

I'd like to use popover to display an image only, without any decoration : no arrow, transparent background and no elevation.

What is the current behaviour?

I could removed the arrow setting width to zero and I could make background transparent but I have not found a way to suppress elevation of the card.

Other Comments

Great component for my others usage ! Thanks.

Feature to disable/prevent popover from opening

Bug, feature request, or proposal:

Feature request.

What is the expected behaviour?

Expected to disable popover from showing based on some conditions, for example, if editing is disabled.
[mdePopoverDisabled]="true/false"

What is the current behaviour?

Currently I am using onPopoverOpen method to pass some data from view like this:

<div *ngFor="let item of items"">
<div [mdePopoverTriggerFor]="itemPopover" mdePopoverPositionX="after" mdePopoverPositionY="above" [mdePopoverArrowWidth]="12"
                [mdePopoverEnterDelay]="200" [mdePopoverOverlapTrigger]="false"
 (onPopoverOpen)="showDetails(item)">{{item.name}}</div>
</div>

In some cases I don't want popover to be shown, for example, when edit mode is disabled. To achieve my goal I use very ugly and blinking hack:

showDetails(item: Item) {
    if (!this.editMode) {
        this.trigger.closePopover();
    }
    ...
}

What are the steps to reproduce?

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

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

There might be some cases where popover must be disabled (not shown) on click or hover, but in other cases it should be fully functional based on some conditions.

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

Other Comments

Popover mispositioned and detached when triggering on hover if the trigger element is removed from the DOM

Bug, feature request, or proposal:

Bug

What is the expected behaviour?

The popover should disappear if the trigger element (or specific target -mdePopoverTargetAt-) is removed from the DOM before the popover is displayed after the enter delay has transcurred.

What is the current behaviour?

The popover is displayed mispositioned at the top left corner of the page.

What are the steps to reproduce?

See example here: https://mde-popover-9eegua.stackblitz.io/

1. Hover over the button "Show on hover" to see the normal hover behavior
2. Hover the "Show on hover & remove" button to display the popover and remove the trigger

Provide a working example using StackBlitz (or similar) to reproduce the problem.
StackBlitz Template: https://mde-popover-9eegua.stackblitz.io/

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

Even when this might look like a weird case is a problem that appears very frequently if you use the popover on long lists when using virtual scroll (or another technique to limit the number of DOM elements rendered in the browser by removing those that are not visible to the user). If you have a list with popovers that trigger on 'hover' and you scroll fast thru the list (mouse wheel or gestures in your touchpad), then you'll see those popovers appearing at the top left of your page completely detached from the element that triggered it.

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

Material-Exteded v2.0.2

Other Comments

ERROR TypeError: this._overlay.position(...).flexibleConnectedTo is not a function

Bug:

There is error when clicking on tooltip:
ERROR TypeError: this._overlay.position(...).flexibleConnectedTo is not a function

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

angular/cli: "^1.7.3",
angular/core: "^5.2.9",
angular/cdk: "^5.2.4",
"typescript": "^2.8",

Some Material Components are rendered wrong in Popover

Bug, feature request, or proposal:

Bug

What is the expected behaviour?

What is the current behaviour?

If I use Material stepper or expansion-panal than it is rendered wrong. The elements are closed but shown as open.

What are the steps to reproduce?

https://github.com/merschel/Material-Popover-Bug

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

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

"devDependencies": {
"@angular/animations": "^5.0.2",
"@angular/cdk": "^5.0.0-rc.1",
"@angular/cli": "1.5.2",
"@angular/common": "^5.0.2",
"@angular/compiler": "^5.0.2",
"@angular/compiler-cli": "^5.0.2",
"@angular/core": "^5.0.2",
"@angular/forms": "^5.0.2",
"@angular/language-service": "^5.0.2",
"@angular/material": "^5.0.0-rc.1",
"@angular/platform-browser": "^5.0.2",
"@angular/platform-browser-dynamic": "^5.0.2",
"@angular/router": "^5.0.2",
"@material-extended/mde": "^1.0.0-alpha.6",
"@types/glob": "^5.0.33",
"@types/jasmine": "2.5.45",
"@types/node": "~7.0.48",
"@types/serialport": "^4.0.9",
"chokidar": "^1.7.0",
"codelyzer": "~4.0.1",
"core-js": "^2.4.1",
"electron": "1.8.2-beta.3",
"electron-builder": "~19.45.5",
"electron-reload": "^1.2.1",
"hammerjs": "^2.0.8",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"jspdf": "^1.3.5",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"moment": "^2.19.2",
"protractor": "~5.2.0",
"rxjs": "^5.5.2",
"ts-md5": "^1.2.2",
"ts-node": "~3.3.0",
"tslint": "~5.8.0",
"typescript": "~2.4.2",
"zone.js": "^0.8.4"

Other Comments

Attempting to attach an unknown Portal type. BasePortalHost accepts either a ComponentPortal or a TemplatePortal.

Occurs when trying to open a popover when code is compiled in production mode

button click event inside the the popover content is not working in `angular 5.0` and `@material-extended/mde": "1.0.0-alpha.6`

Hi Joe,

The issue related to the below thread which we already discussed
#31

I am using Angular 5.0 and @material-extended/mde": "1.0.0-alpha.6
Wether the above solution will work or not. if not let me know the solution please

Thanks
Varun

Popover flickering with large contents

Bug, feature request, or proposal:

The popover is flickering with large text contents.

What are the steps to reproduce?

https://stackblitz.com/edit/mde-popover-ugqcfs

Metadata version mismatch for module

Bug, feature request, or proposal:

After updating to the latest alpha, I'm getting this error.
It seems like it can be fixed using this:
angular/components#8229 (comment)

Which basically says upgrade EVERYTHING in angular and angular material to 5 RC0.
I do NOT want to do that. Is this intended?

What is the expected behaviour?

What is the current behaviour?

What are the steps to reproduce?

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

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

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

Other Comments

Bug! Dones't work

angular-version:5.2.6
angular-cdk version:5.2.4

ERROR
TypeError
columnNumber: 9
fileName: "http://localhost:3000/main.bundle.js line 95 > eval"
lineNumber: 1136
message: "this._connectedTo is undefined"
ngDebugContext: Object { view: {…}, nodeIndex: 34, nodeDef: {…}, … }
ngErrorLogger: function bound ()
stack: "ConnectedPositionStrategy@webpack-internal:///./node_modules/@angular/cdk/esm5/overlay.es5.js:1136:9\nOverlayPositionBuilder.prototype.connectedTo@webpack-internal:///./node_modules/@angular/cdk/esm5/overlay.es5.js:2036:16\nMdePopoverTrigger.prototype._getPosition@webpack-internal:///./src/lib/popover/popover-trigger.ts:314:41\nMdePopoverTrigger.prototype._getOverlayConfig@webpack-internal:///./src/lib/popover/popover-trigger.ts:238:41\nMdePopoverTrigger.prototype._createOverlay@webpack-internal:///./src/lib/popover/popover-trigger.ts:224:26\nMdePopoverTrigger.prototype.openPopover@webpack-internal:///./src/lib/popover/popover-trigger.ts:126:13\nMdePopoverTrigger.prototype.togglePopover@webpack-internal:///./src/lib/popover/popover-trigger.ts:120:58\nMdePopoverTrigger.prototype.onClick@webpack-internal:///./src/lib/popover/popover-trigger.ts:87:13\nView_AppComponent_0/<@ng:///AppModule/AppComponent.ngfactory.js:74:27\nhandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13763:115\ncallWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15272:39\ndebugHandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14859:12\ndispatchEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10178:16\nrenderEventHandlerClosure/<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10803:38\ndecoratePreventDefault/<@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2680:53\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:421:17\nonInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4956:24\nZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:420:17\nZone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:188:28\nZoneTask.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:496:24\ninvokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:1517:9\nglobalZoneAwareCallback@webpack-internal:///./node_modules/zone.js/dist/zone.js:1543:17\n"

ERROR CONTEXT
{…}
elDef: Object { nodeIndex: 34, bindingIndex: 3, outputIndex: 2, … }
elView: Object { def: {…}, parent: {…}, state: 1036, … }
nodeDef: Object { nodeIndex: 34, bindingIndex: 3, outputIndex: 2, … }
nodeIndex: 34
view: Object { def: {…}, parent: {…}, state: 1036, … }
proto: Object { elOrCompView: Getter, injector: Getter, component: Getter, … }

Updating to the latest material-beta.10 breaks the this library.

4864:17-23 "export 'ESCAPE' was not found in '@angular/cdk'
    at HarmonyImportSpecifierDependency._getErrors (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:677:24)
    at Compilation.finish (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:535:9)
    at applyPluginsParallel.err (/Users/slee/work/deposco/node_modules/webpack/lib/Compiler.js:512:17)
    at /Users/slee/work/deposco/node_modules/tapable/lib/Tapable.js:289:11
    at /Users/slee/work/deposco/node_modules/html-webpack-plugin/index.js:60:9
    at tryCatcher (/Users/slee/work/deposco/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:651:20)

WARNING in ./node_modules/@material-extended/mde/mde.es5.js
5257:31-45 "export 'TemplatePortal' was not found in '@angular/cdk'
    at HarmonyImportSpecifierDependency._getErrors (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:677:24)
    at Compilation.finish (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:535:9)
    at applyPluginsParallel.err (/Users/slee/work/deposco/node_modules/webpack/lib/Compiler.js:512:17)
    at /Users/slee/work/deposco/node_modules/tapable/lib/Tapable.js:289:11
    at /Users/slee/work/deposco/node_modules/html-webpack-plugin/index.js:60:9
    at tryCatcher (/Users/slee/work/deposco/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:651:20)

WARNING in ./node_modules/@material-extended/mde/mde.es5.js
5361:13-44 "export 'isFakeMousedownFromScreenReader' was not found in '@angular/cdk'
    at HarmonyImportSpecifierDependency._getErrors (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:677:24)
    at Compilation.finish (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:535:9)
    at applyPluginsParallel.err (/Users/slee/work/deposco/node_modules/webpack/lib/Compiler.js:512:17)
    at /Users/slee/work/deposco/node_modules/tapable/lib/Tapable.js:289:11
    at /Users/slee/work/deposco/node_modules/html-webpack-plugin/index.js:60:9
    at tryCatcher (/Users/slee/work/deposco/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:651:20)

WARNING in ./node_modules/@material-extended/mde/mde.es5.js
5440:24-34 "export 'A11yModule' was not found in '@angular/cdk'
    at HarmonyImportSpecifierDependency._getErrors (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:677:24)
    at Compilation.finish (/Users/slee/work/deposco/node_modules/webpack/lib/Compilation.js:535:9)
    at applyPluginsParallel.err (/Users/slee/work/deposco/node_modules/webpack/lib/Compiler.js:512:17)
    at /Users/slee/work/deposco/node_modules/tapable/lib/Tapable.js:289:11
    at /Users/slee/work/deposco/node_modules/html-webpack-plugin/index.js:60:9
    at tryCatcher (/Users/slee/work/deposco/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/slee/work/deposco/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/Users/slee/work/deposco/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:651:20)

angular 5 support

As it is out, can we expect support for latest angular version ? :)

Please update peerDependencies for angular 7

Please update peerDependencies for angular 7

Feature: consider restyling arrow

Currently arrow is just a flat triangle, that doesn't look good on white background:

I've added arrow in away that Bootstrap 4 does that (using ::before and ::after selectors):

Here is my prove of concept: https://stackblitz.com/edit/mde-popover-kg8eqr?file=styles.scss

I've just looked at how Google did they popup, they are using two triangles and offset them by one pixel. This way they get the border effect. Maybe this could be used instead of pseudo selectors.

Popover does not work with fullscreen

Seems like popover doesn't appear in fullscreen mode. Any solutions?

Stackblitz example

Nodes of the tree are the triggers to show the popover.

Update peerDependencies for angular 8

Please update peerDependencies for angular 8

Multiple popovers appear with delay

I'm trying to use MDE popovers as presented here:
http://plnkr.co/edit/ebs4IqbYGq5sRRj7AuKD?p=preview

I've created custom components for the trigger and one to attach a popover to the trigger using <ng-content>. I've set a delay of 1000ms for showing the popover.

Now, when hovering quickly over multiple triggers, multiple popovers appear with a 1000ms delay. Only one popover should appear, since the other triggers aren't hovered anymore.
There are no close() events being fired for the additional popovers.

I noticed that after removing the padding for <my-trigger> the issue disappears.

Maybe I'm doing something wrong?

Bug: Material expansion panels are opened inside popover

Bug, feature request, or proposal:

As the title suggests, inside a popover window the expansion panels are opened by default, even though angular thinks they are closed.

What is the expected behaviour?

The panels should be left alone, so their respective expanded input would decide their visibility state.

What is the current behaviour?

They are opened by default. User has to close it first by hand to kick the expansion panel to the correct states.

What are the steps to reproduce?

StackBlitz Template: https://stackblitz.com/edit/mde-popover-bupa3s

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

Other Comments

Compatible with IE

Bug, feature request, or proposal:

Compatible with IE

What is the expected behaviour?

To work in IE

What is the current behaviour?

Not functioning in IE

What are the steps to reproduce?

Open in IE

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

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

Support for multiple browsers

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

Other Comments

The demo page is also not working in IE.

Popover first opens "upside down" with mdePopoverTriggerOn="hover"

Bug, feature request, or proposal:

Bug

What is the expected behaviour?

Correct orientation:

What is the current behaviour?

Incorrect orientation when hovering over the trigger for the first time (subsequent hovers work fine):

What are the steps to reproduce?

Simply use mdePopoverTriggerOn="hover" in the stackblitz template:
https://stackblitz.com/edit/mde-popover-7cy3ta

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

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.0.5
Node: 8.11.2
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.5
@angular-devkit/build-angular      0.6.5
@angular-devkit/build-optimizer    0.6.5
@angular-devkit/core               0.6.5
@angular-devkit/schematics         0.6.5
@angular/cdk                       6.2.0
@angular/cli                       6.0.5
@angular/material                  6.2.0
@angular/material-moment-adapter   6.2.0
@ngtools/webpack                   6.0.5
@schematics/angular                0.6.5
@schematics/update                 0.6.5
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.8.3
    

Other Comments

Cannot read property 'buttons' of undefined

Bug, feature request, or proposal:

PopoverTrigger trows an error when opened with a mouse click.
Cannot read property 'buttons' of undefined

What is the expected behaviour?

Should not throw an error

What is the current behaviour?

Throws an error

What are the steps to reproduce?

StackBlitz

Just open the console and click on a button and you will see the error.

Problem

The function isFakeMousedownFromScreenReader from the @angular/cdk/a11y,
is called with an undefined value.

export function isFakeMousedownFromScreenReader(event: MouseEvent): boolean {
    return event.buttons === 0;
 }

Solution?

@joejordanbrown

Add a check if the MouseEvent is defined?

...if(event && !isFakeMousedownFromScreenReader(event) {...

@HostListener('mousedown') _handleMousedown(event: MouseEvent): void {
    if (event && !isFakeMousedownFromScreenReader(event)) {
        this._openedByMouse = true;
    }
}

when switching between popover fields, sometimes previous shows up again

plunker copied from previous issue (1k ms delay), just changed version to latest.

http://plnkr.co/edit/8iQPE1DRSRGQjriGbjRm?p=preview

When mouse is hanging for a while at one popover-having div, after going directly to the other, previous popover shows as well as new one ( previous one hides but instantly appears again). It doesn't happen always.

Feature: customize/disable animation

Bug, feature request, or proposal:

Hi,
I'd like to ask for a way to customize/disable animation for show/hide. Currently they are hardcoded.

What is the expected behaviour?

Add ability to customize/disable animations.

What is the current behaviour?

No way to customize/disable animation

AOT build fails in version 0.1.0-alpha.10

After upgrade to 0.1.0-alpha.10 running ng build --prod fails with the following error:

ERROR in ./src/$$_gendir/~/@material-extended/mde/mde.ngfactory.ts
Module not found: Error: Can't resolve '@material-extended/mde/popover/popover-types' in 'C:\Users\krzdud\repos\eazystock\ui-frontend\src\$$_gendir\node_modules\@material-extended\mde'
 @ ./src/$$_gendir/~/@material-extended/mde/mde.ngfactory.ts 9:22-77
 @ ./src/$$_gendir/app/shared/layout/help-popover/help-popover.component.ngfactory.ts
 @ ./src/$$_gendir/app/inventory/inventory.component.ngfactory.ts
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Resizable Popup

Bug, feature request, or proposal:

Resize the popup window once it is opened.

What is the expected behaviour?

What is the current behaviour?

No way we can resize the window as of now.

What are the steps to reproduce?

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

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

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

Other Comments

Can't fixed popover when scroll

Bug, feature request, or proposal:

When I scroll the popover move with the scroll because change position: static.

How can I position a static popover (it does not move with scroll)?

What is the expected behaviour?

I dont want move popover with scroll

What is the current behaviour?

Now if scroll popover move with it.

What are the steps to reproduce?

When you have a big height open popover and scroll down.
https://stackblitz.com/edit/mde-popover-tmyvle

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

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

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

"dependencies": {
    "@angular/animations": "^8.2.5",
    "@angular/cdk": "^8.1.4",
    "@angular/common": "^8.2.5",
    "@angular/compiler": "^8.2.5",
    "@angular/core": "^8.2.5",
    "@angular/forms": "^8.2.5",
    "@angular/material": "^8.1.4",
    "@angular/platform-browser": "^8.2.5",
    "@angular/platform-browser-dynamic": "^8.2.5",
    "@angular/router": "^8.2.5",
    "@material-extended/mde": "^2.3.1",
    "@mdi/font": "^3.9.97",
    "@nrwl/angular": "^8.4.13",
    "axios": "0.19.0",
    "bulma": "^0.7.5",
    "core-js": "^3.2.1",
    "express": "4.17.1",
    "form-data": "2.5.0",
    "hammerjs": "^2.0.8",
    "hbs": "^4.0.4",
    "html5shiv": "^3.7.3",
    "material-design-icons": "^3.0.1",
    "normalize.css": "^8.0.1",
    "respond.js": "^1.4.2",
    "rxjs": "~6.5.3",
    "rxjs-compat": "^6.5.3",
    "web-animations-js": "^2.3.2",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.3",
    "@angular/cli": "^8.3.3",
    "@angular/compiler-cli": "^8.2.5",
    "@angular/language-service": "^8.2.5",
    "@nrwl/cypress": "8.4.13",
    "@nrwl/express": "8.4.13",
    "@nrwl/jest": "8.4.13",
    "@nrwl/node": "8.4.13",
    "@nrwl/workspace": "8.4.13",
    "@types/express": "4.17.0",
    "@types/hbs": "^4.0.1",
    "@types/jest": "24.0.15",
    "@types/jquery": "3.3.30",
    "@types/node": "12.6.2",
    "codelyzer": "5.1.0",
    "cypress": "^3.4.1",
    "dotenv": "8.0.0",
    "html-minifier": "^4.0.0",
    "javascript-obfuscator": "^0.18.1",
    "jest": "24.8.0",
    "jest-preset-angular": "7.1.1",
    "pre-commit": "1.2.2",
    "prettier": "1.18.2",
    "sass": "^1.22.10",
    "ts-jest": "24.0.2",
    "ts-node": "8.3.0",
    "tslint": "5.18.0",
    "typescript": "3.5.3",
    "uglify-js": "^3.6.0"
  }

Other Comments

Opened boolean

Bug, feature request, or proposal:

Feature Request

What is the expected behaviour?

Mat-Menu is giving a boolean opened to give the information whether the menu is open, it could be nice to have a opened boolean variable on the MdePopoverTrigger like it exists already on the MatMenuTrigger : https://material.angular.io/components/menu/api#MatMenuTrigger

What is the current behaviour?

There is only the event opened and closed we have to subscribe to if we want to be noticed of the change of state of the Popover.

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

Simplicity as the boolean avoid to subscribe to 2 events.
Also, the material2 API works now (at least Mat-Menu-Trigger) with a opened boolean variable and not with the events, so maybe consistency.

MdePopoverTrigger is not exported

According to docs, to open the popover programmatically, you should use
@ViewChild(MdPopoverTrigger)
Unfortunately, the library exports the MdePopoverTrigger directive this way:
export { MdePopoverTrigger as ɵb } from './popover/popover-trigger';
So probably the only way to make it work is to import ɵb, which is very weird. At least it would be nice to have the docs updated.

Use it for dynamic content within Angular Material Table

Bug, feature request, or proposal:

how to use it for dynamic content withing angular material table ?

Error when using fullTemplateTypeCheck

Bug

When using fullTemplateTypeCheck in the AOT compiler I get the following error message
Directive MdePopoverTrigger, Expected 1 arguments, but got 0.

What is the expected behaviour?

No Error

What are the steps to reproduce?

Attempt to build with AOT and "angularCompilerOptions": {"fullTemplateTypeCheck": true}

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

angular 6.0.2
material-extended 2.0.0
Typescript 2.7
Windows 10

Other Comments

see also angular/angular#21329

My popover flicks on scroll.

Bug, feature request, or proposal:

My popover stays fix on scroll. It stays on the top while scrolling. and when scroll back to top the width , right etc properties get update and flick the size of the box.

What is the expected behaviour?

It should have scroll up with the screen. And the width of the popup should remain the same.

What is the current behaviour?

It stays on the top and width is variable on scroll.

https://www.loom.com/share/f11b1ee192364a2fa461e0c292dd409b

####StackBlitz Template: https://mde-popover-2jwo6g.stackblitz.io

                <button mat-button class="btn-menu cart_button" [mdePopoverTriggerFor]="appPopover"
                mdePopoverTriggerOn="click" #popoverTrigger="mdePopoverTrigger" mdepopoverpositionx="before">
                    <mat-icon aria-hidden="false" matBadge="0" matBadgeColor="warn" matBadgeSize="small" aria-label="">shopping_cart</mat-icon>
                </button>

            
              <mde-popover #appPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="false">
                <mat-card style="max-width: 350px">
                  <mat-card-content>
                        <div class="cartproductlist" *ngFor="let cartItems of cartProductList">
                            <mat-card class="product-card text-left layout-horizontal"  fxFlex fxLayout="row">
                                <a href="javascript:void(0)" class="remove_me_from_cart"><i class="fa fa-trash"></i></a>
                                <img mat-card-image src="assets/img/products/frenchfries.png" alt="French Fries">
                                <mat-card-content>
                                    <p class="product-card-title">Kurkure</p>
                                    <p class="product-card-subtitle">New 2x110 g Multipack</p>
                                    <p class="product-rate">
                                        <span class="quantity_no_section">Quantity: <span class="quantity_no">1</span></span>
                                        <span class="price_idr">IDR: <span class="quantity_no">850.00</span></span>
                                    </p>
                                </mat-card-content>
                                

                            </mat-card>                            
                        </div>
                        <div class="total_wrap">
                            <span class="total_text">Total:</span>
                            <span class="total_amount">IDR <span class="total_price">1700.00</span></span>
                        </div>
                        <div class="button_wrap">
                            <button mat-button mat-flat-button class="btn-syp">CHECK OUT</button>	
                        </div>
                  </mat-card-content>
                </mat-card>
              </mde-popover>

Can't destroy on ngAfterViewInit

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!

dynamically read data for popover panel

When I need to open popover, trigger the open event to load data from the remote, what should I do. Sometimes we need to read the data dynamically, instead of getting the data in the popover ready at the beginning. Thank you

Datepicker behind popover

Hi!

When a Datepicker was previously opened, and we open a new popover with another Datepicker inside, the new Datepicker will open in the old cdk-overlay-container which will result in it being behind the popover.

Bug: flickering popover

Bug
Open https://uixd.co.uk/open-source-software/material-extended/demo/ in Chrome Browser.
Move mouse over "Hover me". Do not move mouse during and after opening popover. Popover will open and close every second.

Angular 6 support

Bug, feature request, or proposal:

Upgrade dependencies to support NG6

What is the expected behaviour?

Should support angular 6

What is the current behaviour?

It does not support angular 6

What are the steps to reproduce?

• NG6 app with @material-extended/mde

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

Angular 6 has been released

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

Angular 6

Other Comments

Popover first opens arrow bad position with changeDetection: ChangeDetectionStrategy.OnPush

Bug :

When we first opens the popover, the arrow is not good positionned. We already facing this kind of issue here : #28
The bug have been fixed with a good utilisation of zone due to @kostia-lev

But in an application that use changeDetection: ChangeDetectionStrategy.OnPush the bug occur again :

What are the steps to reproduce?

You have to try to implemante an popover with hover trigger.

Put changeDetection: ChangeDetectionStrategy.OnPush directly on component decoration :

`
import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';

@component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
`

Why using ChangeDetectionStrategy ?

Angular is know to check always all the componant in order to detect change. This occure for the single small change on an object. Is very expensif in big application.

With OnPush strategy, you say to angular to only update if the entire object change like in functionnal programming. This force you to use only immutable object as a best practice. Is a very big win of performance. See more : https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

Way to resolve this issue

Create immutable objet for popover and change it as functionnal programming at the beginning. Actually, this work at the second time we hover at the trigger, so that meen that is already the case. We juste have to do the same for the first generation.

I hope @joejordanbrown it's clear and it will be a quick fix.