Hello, I have below code of Mat-select with virtual-scroll.
I have get the value of mat-select in formBuilder but did not reflect the value which I select in the mat-item-select.
<mat-form-field appearance="outline">
<mat-select multiple (openedChange)="openChange($event)" formControlName="itemSelect">
<mat-select-trigger>
{{ itemTrigger }}
</mat-select-trigger>
<cdk-virtual-scroll-viewport itemSize="5" minBufferPx="200" maxBufferPx="400" class="example-viewport-select">
<mat-option *cdkVirtualFor="let list of skillSet" [value]="list.data" (onSelectionChange)="onSelectionChange($event)">
{{list.data}}
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-select>
<mat-error *ngIf="!addCompany.controls['itemSelect'].valid && addCompany.controls['itemSelect'].touched">
{{ titleAlert }}
</mat-error>
</mat-form-field>
ng add @angular/material as per the getting started docs, I get the message The add command requires to be run in an Angular project, but a project definition could not be found.
1 reply
<mat-horizontal-stepper [linear]="true" [selectedIndex]="selectedIndex">
<mat-step *ngFor="let step of steps; let i = index" [editable]="true" [optional]="false" [completed]="selectedIndex > i">
pristine. How can avoid this and only show the error state if it's been touched? It doesn't matter which ErrorStateMatcher I use either. I am forced to use a custom one.
Hello, I want to investigate if this behaviour is bug or feature of Material tabs
What we have in v9 of Material tabs demo (below): if you resize the viewport (where component is being rendered), mat-tabs component dynamically (on fly) shows/hides horizontal navigation arrows according to viewport width
What we have starting from v10: viewport resize does not trigger arrows showing/hiding until we trigger change detection manually (click on tab or programmatically), so they stay visible or hidden at the wrong time.
Examples:
v9: https://stackblitz.com/angular/xbpevvrbkpr?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
v10: https://stackblitz.com/angular/xoepvnaxqak?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
Do you think this behaviour (in v10) is normal?
I tried to open a bottom sheet using click event and failed to do so. Also tried using a subscription and it also failed.
The bottom sheet opens on the top left corner with no functionalities and freezes the window. can not close.
Would like to know what is the possibility of opening the bottom sheet using an event or a subscription.
NOTE: also tried to open a dialog but the result is the same.
Using Angular v10 and Material v10
Thank you
Hi,
when I am trying to apply class dynamically inside ngfor like<button mat-raised-button color="primary" class="delete-range-duration-{{i}}" (click)="deleteRange(i)">Delete</button> where i is index.
it is messing up my material css i.e I am not able to find any material css on the component. button looks like plain HTML button.
The same is happening with other components like input as well.
I am using Angular 7.
I am trying to install angular components using Yarn 2 PnP, I got Angular to work properly but I am struggling to figure out how to (or if it is even possible) get the Angular Material library to work on it. The source of my issue comes from the Sass dependency between @angular/material and @angular/cdk. @use '../../cdk/overlay'; which no longer works when @angular/material and @angular/cdk do not share the same @angular root repository. (Instead, they go into .yarn/$$virtual/@angular-material-virtual-4cab151bf2/0/cache/@angular-material-npm-12.0.0-6e8dd67b13-e9c1a36bd7.zip/node_modules/@angular/material/core/_core.scss, ...)
Has someone succeeded doing this, is this possible, is my environment broken? There is very little documentation around to draw a baseline.
And the example I created here for reference : https://stackblitz.com/edit/angular-ivy-zk9lzx?file=src%2Fapp%2Fapp.component.ts.
Can anyone look into this and give any suggestions, please?
Thank you very much.
was trying to update to @angular/material v12 and using the new sass imports. We're referencing $dark-focused like so:
focused-button: $dark-focused,which as I understand should now be:
@use '~@angular/matieral' as mat
focused-button: mat.$dark-focused,The problem is, it says the variable isn't defined.. I look in here and see export of $mat-dark-focused which doesn't exist... is that not validated and am I correct in thinking the reference is wrong there... for others too? https://github.com/angular/components/blob/master/src/material/core/theming/_palette.import.scss#L8
I am trying to convert angular material table into a web element.
This is what I have tried
import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MatTable } from '@angular/material/table';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [],
imports: [
BrowserModule
],
providers: [],
entryComponents: [
MatTable
]
})
export class AppModule {
constructor(private injector: Injector) {
[
{ componentType: MatTable, name: 'my-mat-table' }
].forEach((e) => {
const element = createCustomElement(e.componentType, { injector: this.injector });
customElements.define(e.name, element);
});
}
ngDoBootstrap() { }
}Now I do not understand how do I use the web element on my html page since the material table examples use angular specific syntax. Any help would be much appreciated.
1 reply
Hi there. I've problem with cdkScrollable wrapped in element with ViewEncapsulation.ShadowDom
Maybe someone can help me.
Hey everyone,
I'm having troubles since NG 12 with theming.
I get following error:
SassError: Undefined function.
╷
79 │ $typography-config: mat.mat-define-typography-config(My code contains this
@use "~@angular/material/theming" as mat;
$typography-config: mat.mat-define-typography-config(
// ...
)The code is loaded thanks to @use through this way
- "styles.scss" loads
@use "theme.scss" - "theme.scss" loads
@use "~myLibrary/typography.scss"
Could someone help me on this? :blush:
EDITED:
The error happens when I try to load anything from mat. inside my library:
mat.$grey-palettemat.$dark-primary-text- ...
Hi Angular team. I've stumbled upon a requirement to implement a virtual scrolling strategy for items with different, but fixed heights. I've explained that in a comment in a github issue, as well as this SO question. I've modified the code suggested in the latter question and it seems to work. Two followup questions:
1) Do you think the use case is generic enough so that i try to create a PR in the experimental cdk, and eventually this becomes an official virtual scrolling strategy? If not, it can be published as a standalone npm module.
2) Is there a set of tests that are meant for different scrolling strategies, something like acceptance tests that cover basic functionality? I attempted to reuse the ones for the fixed strategy, but they also include template cache/track by/etc tests.