How to conditionally add [matMenuTriggerFor] in mat-menuAngular 2 - add custom class to top item for submenu item chosenAngular 2 Not working Collapse function with *ngForwebpack html-loaders lowercase angular 2 built-in directivesImplementing nested menu in Angular Material 2Angular 4 route.navigate expand collapsed menuNested Menu Not Working as Expected in Angular 2 AppUse a variable to specify the mat-menu element to [matMenuTriggerFor]?How to find matched Route from RouterLinkWithHref in Angular 2/5?Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?How to open and close Angular mat menu on hover
Thread safe method to create print layout from within a processing script in QGIS
Why can't my huge trees be chopped down?
Summoning A Technology Based Demon
What are the closest international airports in different countries?
Do 3/8 (37.5%) of Quadratics Have No x-Intercepts?
Why do they sell Cat 5 ethernet splitters if you can’t split the signal?
Why to use a pull up/down for a GPIO output pin
Why force the nose of 737 Max down in the first place?
How to kill my goat in Goat Simulator
Could a singular planet have more than one diverse atmosphere?
Why isn't there any 9.5 digit multimeter or higher?
Did the Americans trade destroyers in the "destroyer deal" that they would later need themselves?
Why is the number of local variables used in a Java bytecode method not the most economical?
What language is Raven using for her attack in the new 52?
Why did House of Representatives need to condemn Trumps Tweets?
Is there a wealth gap in Boston where the median net worth of white households is $247,500 while the median net worth for black families was $8?
What is the most convenient way to prepare ferrous oxide (FeO) in the laboratory?
Is there an antonym for "spicy" or "hot" regarding food (NOT "seasoned" but "spicy")?
Is this photo showing a woman standing in the nude before teenagers real?
Why did I lose on time with 3 pawns vs Knight. Shouldn't it be a draw?
Compound Word Neologism
Can I see due to the mundane light source that I carry while I'm invisible?
How to go ahead with methods that only one derived class implements from a common interface?
Copying an existing HTML page and use it, is that against any copyright law?
How to conditionally add [matMenuTriggerFor] in mat-menu
Angular 2 - add custom class to top item for submenu item chosenAngular 2 Not working Collapse function with *ngForwebpack html-loaders lowercase angular 2 built-in directivesImplementing nested menu in Angular Material 2Angular 4 route.navigate expand collapsed menuNested Menu Not Working as Expected in Angular 2 AppUse a variable to specify the mat-menu element to [matMenuTriggerFor]?How to find matched Route from RouterLinkWithHref in Angular 2/5?Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?How to open and close Angular mat menu on hover
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Few #menu item has no sub child.But shows the arrow which indicates there is a submenu.Which is wrong.
How to add [matMenuTriggerFor]="subMenu" only when there are items in subMenu.
<mat-menu #menu="matMenu">
<ng-container *ngFor="let item of menuItem.items; let i=index">
<button class="mat-menu-item" mat-menu-item
[routerLink]="item.routerLink" routerLinkActive="active" [matMenuTriggerFor]="subMenu"> item.name
</button>
<mat-menu #subMenu="matMenu"> <button class="mat-sub-menu-item"
*ngFor="let subitem of menuItem.items[i].subitems" mat-menu-item> subitem.name </button>
</mat-menu>
</ng-container>
</mat-menu>
angular angular-material edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
add a comment |
Few #menu item has no sub child.But shows the arrow which indicates there is a submenu.Which is wrong.
How to add [matMenuTriggerFor]="subMenu" only when there are items in subMenu.
<mat-menu #menu="matMenu">
<ng-container *ngFor="let item of menuItem.items; let i=index">
<button class="mat-menu-item" mat-menu-item
[routerLink]="item.routerLink" routerLinkActive="active" [matMenuTriggerFor]="subMenu"> item.name
</button>
<mat-menu #subMenu="matMenu"> <button class="mat-sub-menu-item"
*ngFor="let subitem of menuItem.items[i].subitems" mat-menu-item> subitem.name </button>
</mat-menu>
</ng-container>
</mat-menu>
edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
just a guess: [matMenuTriggerFor]="menuItems.length > 0 ? subMenu : null"
– enf0rcer
Mar 26 at 20:05
submenu items are part of menuItem.items[i].subitems array.
– Rimika
Mar 26 at 21:23
[ "id": "1", "name": "Clients", "icon": "perm_identity", "items": [ "name": "Manage Clients", "routerLink": "/Object/Contact", "subitems":[ "name":"Sub Client 1" ] , "name": "Manage Accounts", "routerLink": "/Object/Account" ] ]
– Rimika
Mar 26 at 21:25
it was just an example of course.menuItemscould be any var
– enf0rcer
Mar 26 at 21:47
1
yeah sure..But [matMenuTriggerFor]="item.subitems.length > 0 ? subMenu : null" doesnot work either.
– Rimika
Mar 26 at 21:50
add a comment |
Few #menu item has no sub child.But shows the arrow which indicates there is a submenu.Which is wrong.
How to add [matMenuTriggerFor]="subMenu" only when there are items in subMenu.
<mat-menu #menu="matMenu">
<ng-container *ngFor="let item of menuItem.items; let i=index">
<button class="mat-menu-item" mat-menu-item
[routerLink]="item.routerLink" routerLinkActive="active" [matMenuTriggerFor]="subMenu"> item.name
</button>
<mat-menu #subMenu="matMenu"> <button class="mat-sub-menu-item"
*ngFor="let subitem of menuItem.items[i].subitems" mat-menu-item> subitem.name </button>
</mat-menu>
</ng-container>
</mat-menu>
edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
Few #menu item has no sub child.But shows the arrow which indicates there is a submenu.Which is wrong.
How to add [matMenuTriggerFor]="subMenu" only when there are items in subMenu.
<mat-menu #menu="matMenu">
<ng-container *ngFor="let item of menuItem.items; let i=index">
<button class="mat-menu-item" mat-menu-item
[routerLink]="item.routerLink" routerLinkActive="active" [matMenuTriggerFor]="subMenu"> item.name
</button>
<mat-menu #subMenu="matMenu"> <button class="mat-sub-menu-item"
*ngFor="let subitem of menuItem.items[i].subitems" mat-menu-item> subitem.name </button>
</mat-menu>
</ng-container>
</mat-menu>
edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
edited Mar 26 at 20:05
G. Tranter
6,9631 gold badge9 silver badges32 bronze badges
6,9631 gold badge9 silver badges32 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
asked Mar 26 at 19:21
RimikaRimika
213 bronze badges
213 bronze badges
just a guess: [matMenuTriggerFor]="menuItems.length > 0 ? subMenu : null"
– enf0rcer
Mar 26 at 20:05
submenu items are part of menuItem.items[i].subitems array.
– Rimika
Mar 26 at 21:23
[ "id": "1", "name": "Clients", "icon": "perm_identity", "items": [ "name": "Manage Clients", "routerLink": "/Object/Contact", "subitems":[ "name":"Sub Client 1" ] , "name": "Manage Accounts", "routerLink": "/Object/Account" ] ]
– Rimika
Mar 26 at 21:25
it was just an example of course.menuItemscould be any var
– enf0rcer
Mar 26 at 21:47
1
yeah sure..But [matMenuTriggerFor]="item.subitems.length > 0 ? subMenu : null" doesnot work either.
– Rimika
Mar 26 at 21:50
add a comment |
just a guess: [matMenuTriggerFor]="menuItems.length > 0 ? subMenu : null"
– enf0rcer
Mar 26 at 20:05
submenu items are part of menuItem.items[i].subitems array.
– Rimika
Mar 26 at 21:23
[ "id": "1", "name": "Clients", "icon": "perm_identity", "items": [ "name": "Manage Clients", "routerLink": "/Object/Contact", "subitems":[ "name":"Sub Client 1" ] , "name": "Manage Accounts", "routerLink": "/Object/Account" ] ]
– Rimika
Mar 26 at 21:25
it was just an example of course.menuItemscould be any var
– enf0rcer
Mar 26 at 21:47
1
yeah sure..But [matMenuTriggerFor]="item.subitems.length > 0 ? subMenu : null" doesnot work either.
– Rimika
Mar 26 at 21:50
just a guess: [matMenuTriggerFor]="menuItems.length > 0 ? subMenu : null"
– enf0rcer
Mar 26 at 20:05
just a guess: [matMenuTriggerFor]="menuItems.length > 0 ? subMenu : null"
– enf0rcer
Mar 26 at 20:05
submenu items are part of menuItem.items[i].subitems array.
– Rimika
Mar 26 at 21:23
submenu items are part of menuItem.items[i].subitems array.
– Rimika
Mar 26 at 21:23
[ "id": "1", "name": "Clients", "icon": "perm_identity", "items": [ "name": "Manage Clients", "routerLink": "/Object/Contact", "subitems":[ "name":"Sub Client 1" ] , "name": "Manage Accounts", "routerLink": "/Object/Account" ] ]
– Rimika
Mar 26 at 21:25
[ "id": "1", "name": "Clients", "icon": "perm_identity", "items": [ "name": "Manage Clients", "routerLink": "/Object/Contact", "subitems":[ "name":"Sub Client 1" ] , "name": "Manage Accounts", "routerLink": "/Object/Account" ] ]
– Rimika
Mar 26 at 21:25
it was just an example of course.
menuItems could be any var– enf0rcer
Mar 26 at 21:47
it was just an example of course.
menuItems could be any var– enf0rcer
Mar 26 at 21:47
1
1
yeah sure..But [matMenuTriggerFor]="item.subitems.length > 0 ? subMenu : null" doesnot work either.
– Rimika
Mar 26 at 21:50
yeah sure..But [matMenuTriggerFor]="item.subitems.length > 0 ? subMenu : null" doesnot work either.
– Rimika
Mar 26 at 21:50
add a comment |
1 Answer
1
active
oldest
votes
Resolved this issue by adding *ngIf="menuItem.items[i].subitems" to the button
<button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'" mat-menu-item [routerLink]="item.routerLink"
routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">item.name</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
</button>answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55364802%2fhow-to-conditionally-add-matmenutriggerfor-in-mat-menu%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Resolved this issue by adding *ngIf="menuItem.items[i].subitems" to the button
<button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'" mat-menu-item [routerLink]="item.routerLink"
routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">item.name</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
</button>answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
add a comment |
Resolved this issue by adding *ngIf="menuItem.items[i].subitems" to the button
<button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'" mat-menu-item [routerLink]="item.routerLink"
routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">item.name</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
</button>answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
add a comment |
Resolved this issue by adding *ngIf="menuItem.items[i].subitems" to the button
<button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'" mat-menu-item [routerLink]="item.routerLink"
routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">item.name</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
</button>answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
Resolved this issue by adding *ngIf="menuItem.items[i].subitems" to the button
<button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'" mat-menu-item [routerLink]="item.routerLink"
routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">item.name</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
</button><button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'" mat-menu-item [routerLink]="item.routerLink"
routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">item.name</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
</button><button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'" mat-menu-item [routerLink]="item.routerLink"
routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">item.name</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
</button>answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
answered Apr 11 at 0:57
RimikaRimika
213 bronze badges
213 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55364802%2fhow-to-conditionally-add-matmenutriggerfor-in-mat-menu%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
just a guess: [matMenuTriggerFor]="menuItems.length > 0 ? subMenu : null"
– enf0rcer
Mar 26 at 20:05
submenu items are part of menuItem.items[i].subitems array.
– Rimika
Mar 26 at 21:23
[ "id": "1", "name": "Clients", "icon": "perm_identity", "items": [ "name": "Manage Clients", "routerLink": "/Object/Contact", "subitems":[ "name":"Sub Client 1" ] , "name": "Manage Accounts", "routerLink": "/Object/Account" ] ]
– Rimika
Mar 26 at 21:25
it was just an example of course.
menuItemscould be any var– enf0rcer
Mar 26 at 21:47
1
yeah sure..But [matMenuTriggerFor]="item.subitems.length > 0 ? subMenu : null" doesnot work either.
– Rimika
Mar 26 at 21:50