feat(menu): support lazy rendering and passing in context data #9271

crisbeto · 2018-01-07T17:43:26Z

Introduces the matMenuContent directive that allows for menu content to be rendered lazily.
Adds the matMenuTriggerData input to the MatMenuTrigger that allows for contextual data to be passed in to the lazily-rendered menu panel. This allows for the menu instance to be re-used between triggers.

jelbourn · 2018-01-11T00:08:10Z

src/lib/menu/menu-content.ts

+    const element: HTMLElement = this._template.elementRef.nativeElement;
+
+    // Since the menu might be attached to a different DOM node, we have to re-insert it every time.
+    element.parentNode!.insertBefore(this._outlet.hostDomElement, element);


I don't quite follow why this is necessary

It's because we can have the menu be opened by different triggers which in turn have their own OverlayRef with a different pane. If we didn't do this, the element could end up in limbo if you opened it using two different triggers.

Add that explanation as a comment?

jelbourn · 2018-01-11T00:09:12Z

src/lib/menu/menu-content.ts

+import {DOCUMENT} from '@angular/common';
+
+/**
+ * Menu content that will be rendered lazily once the menu is opened.


Would an end user need to ever interact with this class (i.e. should it be docs-private)?

I did it, because we support providing your own menu instance that matches the MatMenuPanel interface.

jelbourn · 2018-01-11T00:14:10Z

src/lib/menu/menu.md

+with the `matMenuContent` attribute:
+
+```html
+<mat-menu #appMenu="matMenu">


What do you think of avoiding the extra matMenuContent by letting people add matMenu to an ng-template element? Something like

<ng-template matMenu> ... </ng-template>

The selector for the menu would change to mat-menu, ng-template[matMenu]. The menu would then optionally inject TemplateRef and go through the extra steps if one is present.

That's what I was going for initially, but Angular throws an error when you have a component on an ng-template. The alternative would be to use a directive, but we can't do that either, because we need to wrap the menu content in a div to add the proper styling and for the animation to work.

jelbourn

LGTM, just minor comments. Add merge-ready when ready

jelbourn · 2018-01-11T18:07:08Z

src/lib/menu/menu-content.ts

+    const element: HTMLElement = this._template.elementRef.nativeElement;
+
+    // Since the menu might be attached to a different DOM node, we have to re-insert it every time.
+    element.parentNode!.insertBefore(this._outlet.hostDomElement, element);


Add that explanation as a comment?

jelbourn · 2018-01-11T18:14:33Z

src/cdk/portal/dom-portal-outlet.ts

  constructor(
-      private _hostDomElement: Element,
+      /** Element into which the content is projected. */
+      public hostDomElement: Element,


Maybe rename this to outletElement? I think the "host" is leftover from the old class name

jelbourn · 2018-01-23T16:01:40Z

@crisbeto passes Google presubmit, just needs rebase

crisbeto · 2018-01-23T18:09:06Z

Rebased.

jelbourn · 2018-01-24T15:40:51Z

@crisbeto failing on Travis now

* Introduces the `matMenuContent` directive that allows for menu content to be rendered lazily. * Adds the `matMenuTriggerData` input to the `MatMenuTrigger` that allows for contextual data to be passed in to the lazily-rendered menu panel. This allows for the menu instance to be re-used between triggers. Fixes angular#9251.

crisbeto · 2018-01-24T18:45:33Z

Fixed the test failure.

angular-automatic-lock-bot · 2019-09-08T05:01:52Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

crisbeto added the pr: needs review label Jan 7, 2018

crisbeto assigned jelbourn Jan 7, 2018

crisbeto requested review from jelbourn and kara as code owners January 7, 2018 17:43

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 7, 2018

crisbeto force-pushed the 9251/menu-lazy-rendering branch from 58fb254 to 5e636f9 Compare January 8, 2018 20:24

jelbourn added the target: minor This PR is targeted for the next minor release label Jan 10, 2018

jelbourn reviewed Jan 11, 2018

View reviewed changes

jelbourn approved these changes Jan 11, 2018

View reviewed changes

jelbourn added pr: lgtm and removed pr: needs review labels Jan 11, 2018

crisbeto force-pushed the 9251/menu-lazy-rendering branch from 5e636f9 to 607d9c8 Compare January 11, 2018 18:28

crisbeto added the action: merge The PR is ready for merge by the caretaker label Jan 11, 2018

crisbeto force-pushed the 9251/menu-lazy-rendering branch from 607d9c8 to 0a759e0 Compare January 22, 2018 20:41

crisbeto force-pushed the 9251/menu-lazy-rendering branch from 0a759e0 to 6febb78 Compare January 23, 2018 18:08

crisbeto force-pushed the 9251/menu-lazy-rendering branch from 6febb78 to 7f87d91 Compare January 24, 2018 18:12

crisbeto force-pushed the 9251/menu-lazy-rendering branch from 7f87d91 to 192be85 Compare January 24, 2018 18:20

jelbourn merged commit 9fed87c into angular:master Jan 25, 2018

crisbeto mentioned this pull request Apr 13, 2018

Should mat-menu-item _triggersSubMenu be public? #10802

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

feat(menu): support lazy rendering and passing in context data #9271

feat(menu): support lazy rendering and passing in context data #9271

Uh oh!

Conversation

crisbeto commented Jan 7, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crisbeto Jan 11, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jelbourn commented Jan 23, 2018

Uh oh!

crisbeto commented Jan 23, 2018

Uh oh!

jelbourn commented Jan 24, 2018

Uh oh!

crisbeto commented Jan 24, 2018

Uh oh!

angular-automatic-lock-bot bot commented Sep 8, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

crisbeto Jan 11, 2018 •

edited

Loading