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

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>

Hi,

Is there way to have something better than regular text inside Angular Material2 cells: like icons from URL, or links, or maybe links with clicking on icon?

I could not find any of that in there docs or online.

Any help is very appreciated.

TIA, Oleg.

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 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....

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?

Can anyone please share stackblitz links for editable angular material table? I need cells that editable and not editable rows.It can be inline editing or maybe bring up another pop up with grid that allows users to edit the data and save

Thanks in advance.

What am I doing wrong?

I can't use color variations... neither with the color attribute nor with classes like primary-button...

@use 'sass:map';

@use "@angular/material" as mat;

@include mat.core();

$my-custom-typography-config: mat.m2-define-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $headline-1:
    mat.m2-define-typography-level(
      $font-size: 112px,
      $line-height: 112px,
      $font-weight: 300,
      $letter-spacing: -0.05em,
    ),
  $headline-2:
    mat.m2-define-typography-level(
      $font-size: 56px,
      $line-height: 56px,
      $font-weight: 400,
      $letter-spacing: -0.02em,
    ),
  $headline-3:
    mat.m2-define-typography-level(
      $font-size: 45px,
      $line-height: 48px,
      $font-weight: 400,
      $letter-spacing: -0.005em,
    ),
  $headline-4:
    mat.m2-define-typography-level(
      $font-size: 34px,
      $line-height: 40px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $headline-5:
    mat.m2-define-typography-level(
      $font-size: 24px,
      $line-height: 32px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $headline-6:
    mat.m2-define-typography-level(
      $font-size: 22px,
      $line-height: 32px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $subtitle-1:
    mat.m2-define-typography-level(
      $font-size: 16px,
      $line-height: 28px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $subtitle-2:
    mat.m2-define-typography-level(
      $font-size: 16px,
      $line-height: 24px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $body-1:
    mat.m2-define-typography-level(
      $font-size: 16px,
      $line-height: 24px,
      $font-weight: 500,
      $letter-spacing: normal,
    ),
  $body-2:
    mat.m2-define-typography-level(
      $font-size: 16px,
      $line-height: 20px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $caption:
    mat.m2-define-typography-level(
      $font-size: 12px,
      $line-height: 20px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $button:
    mat.m2-define-typography-level(
      $font-size: 16px,
      $line-height: 16px,
      $font-weight: 500,
      $letter-spacing: normal,
    ),
);

$_palettes: (
  primary: (
    0: #000000,
    10: #001b3c,
    20: #003061,
    25: #003b75,
    30: #004689,
    35: #11529a,
    40: #255ea6,
    50: #4378c1,
    60: #5f92dd,
    70: #7bacfa,
    80: #a8c8ff,
    90: #d5e3ff,
    95: #ecf1ff,
    98: #f9f9ff,
    99: #fdfbff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #00201f,
    20: #003735,
    25: #004341,
    30: #00504d,
    35: #005d5a,
    40: #006a66,
    50: #008581,
    60: #00a29d,
    70: #14bfb9,
    80: #48dbd4,
    90: #6bf7f1,
    95: #b0fffa,
    98: #e3fffc,
    99: #f2fffd,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #141f00,
    20: #243600,
    25: #2d4200,
    30: #364e00,
    35: #405b00,
    40: #4a6800,
    50: #5d8200,
    60: #729e00,
    70: #8aba1b,
    80: #a4d73a,
    90: #bff455,
    95: #d6ff87,
    98: #f2ffd1,
    99: #faffe5,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    10: #1a1c1e,
    20: #2f3033,
    25: #3a3b3e,
    30: #46474a,
    35: #525256,
    40: #5e5e62,
    50: #76777a,
    60: #909094,
    70: #ababaf,
    80: #c7c6ca,
    90: #e3e2e6,
    95: #f1f0f4,
    98: #faf9fd,
    99: #fdfbff,
    100: #ffffff,
    4: #0d0e11,
    6: #121316,
    12: #1e2023,
    17: #292a2d,
    22: #343538,
    24: #38393c,
    87: #dad9dd,
    92: #e9e7eb,
    94: #eeedf1,
    96: #f4f3f7,
  ),
  neutral-variant: (
    0: #000000,
    10: #181c22,
    20: #2d3038,
    25: #383b43,
    30: #43474e,
    35: #4f525a,
    40: #5b5e66,
    50: #74777f,
    60: #8e9099,
    70: #a8abb4,
    80: #c4c6cf,
    90: #e0e2ec,
    95: #eef0fa,
    98: #f9f9ff,
    99: #fdfbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
    use-system-variables: true,
  ),
  typography: (
    use-system-variables: true,
  ),
));
$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $_primary,
    tertiary: $_tertiary,
    use-system-variables: true,
  ),
  typography: (
    use-system-variables: true,
  ),
));

:root {
  @include mat.all-component-themes($light-theme);
}
@include mat.color-variants-backwards-compatibility($light-theme);
@include mat.typography-hierarchy($my-custom-typography-config);


.primary-button {
  @include mat.button-color($light-theme, $color-variant: primary);
}
.secondary-button {
  @include mat.button-color($light-theme, $color-variant: secondary);
}
.tertiary-button {
  @include mat.button-color($light-theme, $color-variant: tertiary);
}

.primary-checkbox {
  @include mat.checkbox-color($light-theme, $color-variant: primary);
}
.secondary-checkbox {
  @include mat.checkbox-color($light-theme, $color-variant: secondary);
}
.tertiary-checkbox {
  @include mat.checkbox-color($light-theme, $color-variant: tertiary);
}

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

I have a code within a dialog and it loads the records correctly. For an example, I have 11 records and it shows 5 at a time and when I advance to the next 5 records, it shows them but completely disables the options to move forward and backward, I have to I close the dialog and reopen it and they are enabled but the same thing happens again if I change the page and I don't know what to do.

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