Recently, I've been working on customizing the CSS for <mat-menu>, specifically in an Angular Standalone Component.
So far, I've attempted to tweak it using the :ng-deep selector. Unfortunately, this method results in the CSS bleeding into the global styles, which is not ideal.
<button
[matMenuTriggerFor]="menu"
(menuOpened)="isMenuOpened = true;"
(menuClosed)="isMenuOpened = false;"
class="button"
[ngClass]="{
'button-red': hasCheckedFilter(),
}">
<ng-template
#title
let-count="count"
[ngTemplateOutlet]="title"
[ngTemplateOutletContext]="{ count: checkedFiltersLength() }">
<ng-container [ngSwitch]="count">
<ng-container *ngSwitchCase="0">
<span>Tipe Dokumen</span>
</ng-container>
<ng-container *ngSwitchCase="1">
<span>{{ formatFirstCheckedFilter() }}</span>
</ng-container>
<ng-container *ngSwitchDefault>
<span>Tipe Dokumen ({{ count }})</span>
</ng-container>
</ng-container>
</ng-template>
<mat-icon
[fontIcon]="isMenuOpened ? 'expand_more' : 'expand_less'"></mat-icon>
</button>
<mat-menu #menu="matMenu" class="dashboardPelacakKebijakanFilterMenu"
(click)="$event.stopPropagation()">
@for (filter of filters(); track filter.type) {
<a
(click)="$event.stopPropagation(); toggleFilter(filters, filter.type)"
class="dashboardPelacakKebijakanFilterMenu__button"
routerLink="." [queryParams]="filters() | formatFiltersTipeDokumenToQueryParams: filter.type: filter.checked: activatedRoute.snapshot.queryParams">
<div>
<span
class="dashboardPelacakKebijakanFilterMenu__button__type">{{ filter.type }}</span>
<mat-icon
[fontIcon]="filter.checked ? 'check_box' : 'check_box_outline_blank'"
class="dashboardPelacakKebijakanFilterMenu__button__icon"></mat-icon>
</div>
</a>
}
</mat-menu>
.button {
// Layout
display: flex;
gap: 0.25rem;
align-items: center;
padding: 0.5rem 0.75rem;
// Style
border-radius: 62.5rem;
border: 1px solid var(--Color-Gray-gray20, #EAECF0);
background: var(--Color-Gray-gray5, #FCFCFD);
...
}
// temporary solution.
// ng-deep is deprecated.
::ng-deep .mat-mdc-menu-panel.dashboardPelacakKebijakanFilterMenu {
...
import { Component, OnInit, Signal, WritableSignal, computed, signal } from '@angular/core';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { FilterTipeDokumen, FilterTipeDokumenType } from '../../../domain/entities/components/dashboard-pelacak-kebijakan-filter-tipe-dokumen/filter-tipe-dokumen';
import { FormatFiltersTipeDokumenToQueryParamsPipe } from '../../pipes/format-filters-tipe-dokumen-to-query-params/format-filters-tipe-dokumen-to-query-params.pipe';
import { NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
@Component({
...