!tigLUmlwJZDNSZENWC:matrix.org

Angular Material

52 Members
Material Design components for Angular https://material.angular.io4 Servers

Load older messages


SenderMessageTime
25 May 2021
@bertrandmarechal-5ddd2ef8d73408ce4fd22bc4:gitter.imBertrandMarechal (BertrandMarechal) joined the room.17:08:11
@bertrandmarechal-5ddd2ef8d73408ce4fd22bc4:gitter.imBertrandMarechal (BertrandMarechal) @compmaster did you try to have a look at the Focus management options ? https://material.angular.io/components/sidenav/overview#focus-management 17:08:11
@bertrandmarechal-5ddd2ef8d73408ce4fd22bc4:gitter.imBertrandMarechal (BertrandMarechal) * @compmaster did you try to have a look at the Focus management options ? https://material.angular.io/components/sidenav/overview#focus-management 17:08:42
26 May 2021
@compmaster-57c812ef40f3a6eec062aac5:gitter.imcompmaster (compmaster) @BertrandMarechal focus management is about <mat-sidenav>, not the <mat-sidenav-content> (whole page body) 10:55:46
1 Jun 2021
@skamble89-60b657eb6da03739847de68a:gitter.imskamble89 (Saurabh Kamble) joined the room.15:54:04
@skamble89-60b657eb6da03739847de68a:gitter.imskamble89 (Saurabh Kamble)

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.

15:54:05
@skamble89-60b657eb6da03739847de68a:gitter.imskamble89 (Saurabh Kamble) *

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.

15:54:19
@kswat-5fa83b10d73408ce4ff391ca:gitter.imkswat (kswat) joined the room.20:37:52
@kswat-5fa83b10d73408ce4ff391ca:gitter.imkswat (kswat) Hi, I have observed a duplicate stepper component, after submitting my request and getting back response. Did anyone observe this? 20:37:53
@kswat-5fa83b10d73408ce4ff391ca:gitter.imkswat (kswat) 20:38:13
@kswat-5fa83b10d73408ce4ff391ca:gitter.imkswat (kswat) top one was the original, and the bottom one appears for a second or two, before it disappears 20:39:44
2 Jun 2021
@ychaikin-58cfdae2d73408ce4f523f05:gitter.imychaikin (Yaakov Chaikin) Anyone know if there is a way to have a fixed option in a mat-autocomplete component, i.e., where the fixed option is always shown at the bottom of the autocomplete dropdown while the rest of the options are scrollable? 17:09:21
3 Jun 2021
@riomhaire:matrix.orgRíomhaire joined the room.17:09:23
4 Jun 2021
@kswat-5fa83b10d73408ce4ff391ca:gitter.imkswat (kswat) Please can someone help me avoid this duplicate 10:07:48
@shinkhouse-5768462ec2f0db084a1ef91c:gitter.imshinkhouse (Samuel Hinkhouse) joined the room.13:56:30
@shinkhouse-5768462ec2f0db084a1ef91c:gitter.imshinkhouse (Samuel Hinkhouse) Hi y'all, in previous versions of Angular Material, there used to be a way to get the background color from some of the SCSS mixins. What is the current way to do this with Angular 12+? 13:56:31
6 Jun 2021
@dpeter99-58cc433bd73408ce4f51ab6c:gitter.imdpeter99 (dpeter99) joined the room.13:17:24
@dpeter99-58cc433bd73408ce4f51ab6c:gitter.imdpeter99 (dpeter99) Hi!
How can I change the app's background color?
I would like to do something similar to what the basil example has.
13:17:24
9 Jun 2021
@kmiasko-5488e1e3db8155e6700ddeae:gitter.imkmiasko (Krzysztof Miąsko) joined the room.09:23:47
@kmiasko-5488e1e3db8155e6700ddeae:gitter.imkmiasko (Krzysztof Miąsko)Redacted or Malformed Event09:23:48
@kmiasko-5488e1e3db8155e6700ddeae:gitter.imkmiasko (Krzysztof Miąsko)

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.

14:38:34
11 Jun 2021
@superitman-5c1e5c21d73408ce4fb2ac78:gitter.imSuperITMan (Alexis Georges) joined the room.09:37:55
@superitman-5c1e5c21d73408ce4fb2ac78:gitter.imSuperITMan (Alexis Georges)

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
  • ...
09:37:55
@superitman-5c1e5c21d73408ce4fb2ac78:gitter.imSuperITMan (Alexis Georges) *

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
  • ...
09:47:17
@milanov-553ab75815522ed4b3df7d57:gitter.immilanov (Milan Milanov) joined the room.10:31:34
@milanov-553ab75815522ed4b3df7d57:gitter.immilanov (Milan Milanov)

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.

10:31:35
@milanov-553ab75815522ed4b3df7d57:gitter.immilanov (Milan Milanov) *

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.

10:31:55
14 Jun 2021
@voltairianman-60c7bb206da03739847ee068:gitter.imvoltairianman (David Smith) joined the room.20:35:13
15 Jun 2021
@voltairianman-60c7bb206da03739847ee068:gitter.imvoltairianman (David Smith)Redacted or Malformed Event14:10:00
@voltairianman-60c7bb206da03739847ee068:gitter.imvoltairianman (David Smith)Redacted or Malformed Event14:38:03

There are no newer messages yet.


Back to Room List