Ggtcf

Can I run 125kHz RF circuit on a breadboard?

How to make money from a browser who sees 5 seconds into the future of any web page?

Are Captain Marvel's powers affected by Thanos breaking the Tesseract and claiming the stone?

Why does a 97 / 92 key piano exist by Bösendorfer?

What should be the ideal length of sentences in a blog post for ease of reading?

How do I prevent inappropriate ads from appearing in my game?

Unable to disable Microsoft Store in domain environment

Is there a reason to prefer HFS+ over APFS for disk images in High Sierra and/or Mojave?

Given this phrasing in the lease, when should I pay my rent?

Limit max CPU usage SQL SERVER with WSRM

Mimic lecturing on blackboard, facing audience

Review your own paper in Mathematics

Why would five hundred and five be same as one?

Can I cause damage to electrical appliances by unplugging them when they are turned on?

Make a Bowl of Alphabet Soup

Why do Radio Buttons not fill the entire outer circle?

What's the name of the logical fallacy where a debater extends a statement far beyond the original statement to make it true?

Should I assume I have passed probation?

Proving an identity involving cross products and coplanar vectors

How much do grades matter for a future academia position?

Ways of geometrical multiplication

If Captain Marvel (MCU) were to have a child with a human male, would the child be human or Kree?

How can I safely use "Thalidomide" in my novel while respecting the trademark?

When is "ei" a diphthong?

Angular Material: CheckBox in mat-menu; Problem with dark themes

Angular 4 CLI, WebPack, switching bootstrap theme dynamically for the entire websiteHow to add custom styling to Angular material formsAngular Material Components not workingAngular 6: mat-toolbar and mat-toolbar-row in footer (shared) component is not displaying properly (but without any error)?Angular Material Change Theme Color of <mat-list-option> checkboxAngular Material custom theme makes popups transparentHow to include custom material themes into components without duplicating mixins: mat-core and angular-material-themeUsing ES6 Map as an input for angular material checkbox throws Parse errorsOpen Angular Material Menu Programmatically using ViewChild on MatMenuTriggerAngular Material mat-checkbox problem on Firefox

0

You can't put a <mat-checkbox> in a <mat-menu> normally. If so, dark themes don't apply to the text-part of your <mat-checkbox> (see the image at the end).

About <mat-label>s there is a similar issue. But the solution is simple:

• 
  Using <label mat-menu-item> instead of <mat-label>.
  

Similarly about buttons.

---

But I couldn't find a similar solution for <mat-checkbox>es! These are all states that I tested:

<mat-menu #menu="matMenu">
 <mat-label>Bad label</mat-label>
 <label mat-menu-item>OK label</label>
 <mat-checkbox>Problem here</mat-checkbox>
 <!-- ERROR:
 <mat-checkbox mat-menu-item>
 Template parse errors:
More than one component matched on this element.
 </mat-checkbox>
 -->
 <br><mat-checkbox></mat-checkbox>
 <label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>

^{stackblitz here}

And the result:

angular checkbox menu angular-material menu-items

share|improve this question

edited Mar 8 at 3:30

Mir-Ismaili

asked Mar 7 at 22:09

Mir-IsmailiMir-Ismaili

2,4791740

add a comment | 

0

You can't put a <mat-checkbox> in a <mat-menu> normally. If so, dark themes don't apply to the text-part of your <mat-checkbox> (see the image at the end).

About <mat-label>s there is a similar issue. But the solution is simple:

• 
  Using <label mat-menu-item> instead of <mat-label>.
  

Similarly about buttons.

---

But I couldn't find a similar solution for <mat-checkbox>es! These are all states that I tested:

<mat-menu #menu="matMenu">
 <mat-label>Bad label</mat-label>
 <label mat-menu-item>OK label</label>
 <mat-checkbox>Problem here</mat-checkbox>
 <!-- ERROR:
 <mat-checkbox mat-menu-item>
 Template parse errors:
More than one component matched on this element.
 </mat-checkbox>
 -->
 <br><mat-checkbox></mat-checkbox>
 <label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>

^{stackblitz here}

And the result:

angular checkbox menu angular-material menu-items

share|improve this question

edited Mar 8 at 3:30

Mir-Ismaili

asked Mar 7 at 22:09

Mir-IsmailiMir-Ismaili

2,4791740

add a comment | 

You can't put a <mat-checkbox> in a <mat-menu> normally. If so, dark themes don't apply to the text-part of your <mat-checkbox> (see the image at the end).

About <mat-label>s there is a similar issue. But the solution is simple:

• 
  Using <label mat-menu-item> instead of <mat-label>.
  

Similarly about buttons.

---

But I couldn't find a similar solution for <mat-checkbox>es! These are all states that I tested:

<mat-menu #menu="matMenu">
 <mat-label>Bad label</mat-label>
 <label mat-menu-item>OK label</label>
 <mat-checkbox>Problem here</mat-checkbox>
 <!-- ERROR:
 <mat-checkbox mat-menu-item>
 Template parse errors:
More than one component matched on this element.
 </mat-checkbox>
 -->
 <br><mat-checkbox></mat-checkbox>
 <label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>

^{stackblitz here}

And the result:

angular checkbox menu angular-material menu-items

share|improve this question

edited Mar 8 at 3:30

Mir-Ismaili

asked Mar 7 at 22:09

Mir-IsmailiMir-Ismaili

2,4791740

<mat-menu #menu="matMenu">
 <mat-label>Bad label</mat-label>
 <label mat-menu-item>OK label</label>
 <mat-checkbox>Problem here</mat-checkbox>
 <!-- ERROR:
 <mat-checkbox mat-menu-item>
 Template parse errors:
More than one component matched on this element.
 </mat-checkbox>
 -->
 <br><mat-checkbox></mat-checkbox>
 <label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>

angular checkbox menu angular-material menu-items

angular checkbox menu angular-material menu-items

share|improve this question

edited Mar 8 at 3:30

Mir-Ismaili

asked Mar 7 at 22:09

Mir-IsmailiMir-Ismaili

2,4791740

share|improve this question

edited Mar 8 at 3:30

Mir-Ismaili

asked Mar 7 at 22:09

Mir-IsmailiMir-Ismaili

2,4791740

asked Mar 7 at 22:09

Mir-IsmailiMir-Ismaili

2,4791740

asked Mar 7 at 22:09

Mir-IsmailiMir-Ismaili

2,4791740

1 Answer
1

active

oldest

votes

1

There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...

<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
 <button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
 <button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not 

With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.

<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox> 

Stackblitz

https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html

share|improve this answer

answered Mar 8 at 2:15

MarshalMarshal

3,1222519

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55053605%2fangular-material-checkbox-in-mat-menu-problem-with-dark-themes%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...

<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
 <button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
 <button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not 

With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.

<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox> 

Stackblitz

https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html

share|improve this answer

answered Mar 8 at 2:15

MarshalMarshal

3,1222519

add a comment | 

1

There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...

<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
 <button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
 <button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not 

With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.

<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox> 

Stackblitz

https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html

share|improve this answer

answered Mar 8 at 2:15

MarshalMarshal

3,1222519

add a comment | 

There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...

<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
 <button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
 <button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not 

With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.

<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox> 

Stackblitz

https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html

share|improve this answer

answered Mar 8 at 2:15

MarshalMarshal

3,1222519

<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
 <button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
 <button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not 

<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox> 

share|improve this answer

answered Mar 8 at 2:15

MarshalMarshal

3,1222519

answered Mar 8 at 2:15

MarshalMarshal

3,1222519

answered Mar 8 at 2:15

MarshalMarshal

3,1222519