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.

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.

Hi there. I've problem with cdkScrollable wrapped in element with ViewEncapsulation.ShadowDom

https://stackoverflow.com/questions/67906352/problems-with-cdkscrollable-and-cdkdroplist-inside-element-wrapped-with-viewenca

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

1. "styles.scss" loads @use "theme.scss"
2. "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-palette
• mat.$dark-primary-text
• ...

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

1. "styles.scss" loads @use "theme.scss"
2. "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-palette
• mat.$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 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.