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.
Hi all. It looks like the changes to material 12 needed to support N number of palettes in a theme is pretty small. Mainly just storing the palettes or palette keys in a location where they can easily be accessed (the root and color locations cant be used to determine the keys since they contain other information aside from palettes), and changing the component themes to something like:
@each $palette-key in $palettes {
$palette: map.get($theme, $palette-key);
&.mat-#{$palette-key} .mat-button-focus-overlay {
background-color: theming.get-color-from-palette($palette);
}
}where the palettes can be iterated over instead of having hard-coded values assigned to primary/accent/warn, etc. I've actually already gone through the code and made these changes and didn't run across any cases the above wouldnt work. Wondering what people's thoughts are on this as I know there has been a big desire from the community for support for additional palettes in a theme, including from projects where I work.
could someone help me with this angular/components#23478
I've tried everything, based on what I found on the internet
and about your locale date wish, you can set the date locale in the module that use the mat-datepicker. Checkout https://material.angular.io/components/datepicker/overview#setting-the-locale-code
Note you have to do it for all the modules that use it
For MatSelect, the overlayDir is now private. Does anyone know how I can access it now? In node_modules MatSelect select.d.ts line 171, it's now:
/* Overlay pane containing the options. /
protected _overlayDir: CdkConnectedOverlay;
But it used to be:
/**
* Overlay pane containing the options.
* @deprecated To be turned into a private API.
* @breaking-change 10.0.0
* @docs-private
*/
overlayDir: CdkConnectedOverlay;
Could you please help with this issue : https://stackoverflow.com/questions/69717559/how-to-generate-and-display-nested-angular-material-table-dynamically
I am unable to find solution to dynamically bind nested mat table having unpredictable no of child elements
Hi guys. I am looking for a way to using Angular Materials drag and drop to swap elements between lists rather than just moving them. That is I have been able to make it work functionally so that elements are swapped / replaced, however, visually when I drag a list item on top of another list item the preview is not correct and shows it as if you are dropping the item in between the items in the target list rather than replacing the item in the list. There are several open issues and questions about this and none of them seems to have been answered which is not encouraging. So my question for you is if this is at all achievable with Angular Materials or do I need to take another approach? It would be weird if it is no way to implement this drag-and-drop behavior as it seems quite a commonplace operation one would want.
https://stackoverflow.com/questions/56669729/angular-7-drag-drop-swapping-elements
https://stackoverflow.com/questions/69310112/angular-12-drag-and-drop-with-replace-list-placeholder-list
https://stackoverflow.com/questions/69752172/using-angular-materials-for-droplist-replacing-empty-positions-in-target-list
https://stackoverflow.com/questions/61218120/swapping-elements-in-list-with-angular-cdk-drag-and-drop-and-cdkdroplistenterpre
angular/components#18317
marceljuenemann/angular-drag-and-drop-lists#216
Do anyone faced this kind issue while embedding an application into another application
{ provide: MAT_DATE_LOCALE, useValue: "de-DE" },
{ provide: LOCALE_ID, useValue: "de-DE" },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },, and using DateAdapter.setLocale("de") in one of components that is using mat-datepicker in this module but with no luck. Day names are translated but Sunday is till first day of a week. Do you have a clue?
MatMomentDateModule,
MatFormFieldControl so it implements that interface. I already have a custom ErrorStateMatcher in my app. Currently, I have a very similar logic that exists in my custom ErrorStateMatcher in the ngDoCheck() where it updates the errorState of the control. Is there any way to associate the custom ErrorStateMatcher with my control or at least re-use it? I can't seem to find it how to integrate the 2 together.
Hi everybody. Is it possible to deliberately assign an invalid string as the datepicker control value? My use case: Populate a form with pre-existing user data, point out any errors and allow them to resume editing from where they have left off.
The component seems to discard values if assigned via the value setter, if it can't create a valid Date object. In my case this would mean that the user would not be able to see where exactly they made a mistake.
I got this to work by for now by accessing the underlying native element, which is obviously less than ideal.
Hello everyone :)
I've created overlay in my Angular app using Portal host and Portal template (Described in this article, https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html). Stackblitz example: https://custom-overlay-step-5.stackblitz.io/
I'm wondering is there any way to define location of Portal host in DOM? As I can see, overlay is always positioned at the bottom of the body (last element of the body).
So I wolud like to move this "placeholder"/Portal host somewhere else in the DOM. Is this possible? Thanks in advance :)
ERROR TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_0__.ɵnov(...).modules is not a function
at Object.handleEvent (oidstfrppopup.component.html:14:87)
at handleEvent (core.js:31595:1)
at callWithDebugContext (core.js:32634:1)
at Object.debugHandleEvent [as handleEvent] (core.js:32401:1)
at dispatchEvent (core.js:23567:1)
at core.js:30800:1
at platform-browser.js:579:1
at _ZoneDelegate.invokeTask (zone-evergreen.js:406:1)
at Object.onInvokeTask (core.js:28567:1)
at _ZoneDelegate.invokeTask (zone-evergreen.js:405:1)Can anyone help me on that ?