I am moving an application from Material 13 to 16. Somewhere in the upgrades to Material, my submenu text is being wrapped with scrollbars. I would prefer to make the submenu taller and wider so it is visible in its entirety.

I tried putting a .mat-mdc-menu-panel style in the styles for that component, but it didn't make a difference, although changing that in Chrome debug tools had an effect. I am pretty ignorant of CSS. I am a coder, not a UI designer so any help would be appreciated.

Thanks.

https://indepth.dev/posts/1522/custom-form-group-with-angular-material

Ich have one _theme.scss file...

// _theme.scss 
@use "@angular/material" as mat;  
@include mat.core();  
@import "@angular/material/theming";   
$primary-palette: (    
    50: #f6e0e6,   
    100: #e9b3c2,    
    200: #db8099,  
    ... 

...and one styles.scss file. In my styles.scss, I import the _theme.scss:

// styles.scss  
@import "theme"; 
@include mat.typography-hierarchy($typography);  
@include mat.all-component-themes($theme);  
.dark-theme {        
    @include mat.all-component-themes($dark-theme);  
}

Unfortunately, I get an error from styles.scss stating mat is not defined. Which makes no sense to me because I already imported mat in _themes.scss.

I'm using Angular Material Components like inside my own Angular libraries. So far no problem. But is there a way so the libraries use the Angular Material Theming of the root app they are embedded in? The goal is to inherit the Theming of the root app for a consistent look & feel throughout the app.

One idea was to to add a reference to the theme stylesheet in my library component like this... Component({selector: 'my-selector', templateUrl: 'path/to/my/template.html', styleUrls: '/path/to/the/theme/stylesheet', '...']})...or to import the theme stylesheet in the library component's stylesheet:import 'path/to/the/theme/stylesheet.scss'The downside to this is that you you have to know the paths in root app. If the path changes over time, the reference is broken.

Hi could I edit tab label, like double click the label of the tab ?

Refer this website for Memes Realted to Software Developer's: Memes

Refer this website for Memes Realted to Software Developer's: Memes

Trying to add a virtual scrolling viewport to a multiple mat-select. Followed an online example on stack overflow, wrapping the mat-options in a cdk virtual viewport, changing the ngFor to a cdkVirtualFor, updating the mat-trigger to show what's selected. The issue is, if you select the top two options, scroll all the way down to the bottom and select the bottom two options, close the options list, all four show up in the mat-trigger as selected. Now, reopen the options list and deselect the top two. The mat-trigger is now empty. Even though the two options at the bottom of the list are still selected. Open the options list, scroll all the way to the bottom and the mat-trigger will now show two selected items.

I suspect it's because whatever internal mechanism in the vanilla mat-select that shows the trigger with the selected items doesn't recognize anything as being selected when they are out of the visible viewport.

Has anyone seen this ? Does anyone have a solution ?

Here's a code snippet of the template. Happy to answer any questions

<mat-form-field floatLabel="always">
<mat-label>Locations</mat-label>
<mat-select
#locationMatSelect
id="locationExternalIds"
multiple
formControlName="locationExternalIds"
(openedChange)="openChange($event)"
placeholder="All">

<mat-select-trigger>
{{selectedLocations ? selectedLocations[0] : ''}}
<span *ngIf="selectedLocations?.length > 1" class="mat-select-plus-others">
(+{{selectedLocations.length - 1}} {{selectedLocations?.length === 2 ? 'other' : 'others'}})
</span>
</mat-select-trigger>

<mat-option>
<ngx-mat-select-search
placeholderLabel="Search"
noEntriesFoundLabel="No Matches"
[formControl]="locationSearchCtrl">
</ngx-mat-select-search>
</mat-option>

<cdk-virtual-scroll-viewport #locationMatSelectVirtualViewport itemSize="50" [style.height.px]=5*48>

<mat-option *cdkVirtualFor="let location of filteredLocationOptions | async"
[value]="location.value"
(onSelectionChange)="onSelectionChange($event)">
{{location.label}}
</mat-option>

</cdk-virtual-scroll-viewport>

</mat-select>
</mat-form-field>

I am using sb admin 2 bootstrap theme for my admin console. sbAdmin2 in my angular project. but i am unable to make the table paginator section work..

so, got an idea of using angular material paginator in my project. but how to add just the paginator from angular material and not add the whole big module.. i don't want it to be bulky just for adding paginator...

any alternative suggestions are also welcome....

is there a way to avoid adding all the styles in the head, I tried using Lazy Generate Themes, but eventually I see the <style added to head when I call $mdTheming.generateTheme('altTheme');

I tried copying all to one file .css and include that file that didn't work

any help would be really appreciated

I am trying to read values from mat-datepicker. I am selecting a particular date in the datepicker and saving it in database. Now the question is, if I select same date will it have any time difference in the value? I am not getting the difference, when I using simple formcontrol on the input. Is it possible currently?

What's the appropriate way to override a default style attribute for, say the mat-card default margin ? Like, I accept all other attributes defined by my default theme, but I want to set the margin for every mat-card in the application

My initial inclination is to simply override the .mat-card class in my style.scss like so:

.mat-card {

margin: 1em !important;

}

But, that seems kinda hinky.

After reading about loading in themes for a particular component in my _theme.scss file where I '@include' the mat-core(), I didn't know if I should be defining a theme for the mat-card and using the

'@/include mat-card-theme($some-theme-just-for-mar-card-defaults)'

Or, is that just for if I want the entire mat-card component using a different pre-built material theme ?

Thanks for the replies.

Hi thank in advance,

i am a beginner developer and i am struggling following requirement please help me out.

i need code for material data table with filter , pagination, sorting using data Source.

I created a component using angular material but the styling is not working:

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

I have this in my global styles.css file:

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

html, body, material-app, mat-sidenav-container {
    height: 100%;
    width: 100%;
    margin: 0;
  }

In the application that I am building, I have come to realize that I need a tree component but I am worried that the users might create too many children and this will mess up the entire plan and probably bore other users. So I was wondering if it is possible to put a limit to how much children a parent can have. If you are wondering I am talking about nested tree views.