Unable to Extend Angular Material MatDivider in Custom Wrapper Component

I'm creating a custom wrapper component in Angular to extend Angular Material’s MatDivider, but I’m running into issues where the component styles and properties from MatDivider are not applied correctly. The goal is to abstract MatDivider so users of my library don’t need to import Angular Material directly.

Here’s my current setup:


Custom Wrapper Component (TypeScript):

import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { MatDivider } from '@angular/material/divider';

/**
* `DividerComponent` is a wrapper around Angular Material’s MatDivider.
* It extends MatDivider and is intended to provide the same functionality
*
*/
@Component({
selector: 'aal-divider',
standalone: true,
template: '',
styleUrls: ['./divider.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DividerComponent extends MatDivider {}


SCSS (divider.component.scss):

@use '@angular/material' as mat;
@use '../../themes/theming' as *;

@include mat.divider-theme($aal--mat-light-theme);

Problem


When I attempt to use DividerComponent, the intended styles and behavior from MatDivider don’t seem to carry over, even though I’ve extended the class. I see the mat-divider class in the DOM, but it’s not displaying as expected.

Question

1. Is there a specific limitation in Angular Material that prevents extending components like MatDivider?
2. Are there other approaches to wrap MatDivider effectively so I can control theming without requiring users to directly import Angular Material?

Any guidance or workaround suggestions would be greatly appreciated!

Continue reading...