Angular Legacy Material Components

A collection of Angular Material legacy components extracted from Angular Material v16 for compatibility with newer Angular versions.

Installation

npm install @mehranjavid/angular-legacy-material-components

Usage

Import the legacy components you need:

import { MatLegacyButtonModule } from '@mehranjavid/angular-legacy-material-components/legacy-button';
import { MatLegacyFormFieldModule } from '@mehranjavid/angular-legacy-material-components/legacy-form-field';
import { MatLegacyInputModule } from '@mehranjavid/angular-legacy-material-components/legacy-input';

@NgModule({
  imports: [
    MatLegacyButtonModule,
    MatLegacyFormFieldModule,
    MatLegacyInputModule,
    // ... other modules
  ],
  // ...
})
export class AppModule { }

Available Components

All legacy Angular Material components are available with the mat-legacy- prefix:

• mat-legacy-button - Legacy buttons
• mat-legacy-form-field - Legacy form fields
• mat-legacy-input - Legacy inputs
• mat-legacy-autocomplete - Legacy autocomplete
• mat-legacy-select - Legacy select
• mat-legacy-checkbox - Legacy checkboxes
• mat-legacy-radio - Legacy radio buttons
• mat-legacy-slide-toggle - Legacy slide toggles
• mat-legacy-list - Legacy lists
• mat-legacy-card - Legacy cards
• mat-legacy-chips - Legacy chips
• mat-legacy-table - Legacy tables
• mat-legacy-tabs - Legacy tabs
• mat-legacy-menu - Legacy menus
• mat-legacy-dialog - Legacy dialogs
• mat-legacy-snack-bar - Legacy snack bars
• mat-legacy-tooltip - Legacy tooltips
• And many more...

Example

<mat-legacy-form-field>
  <mat-legacy-label>Name</mat-legacy-label>
  <input matInput [(ngModel)]="name">
</mat-legacy-form-field>

<button mat-legacy-raised-button color="primary">
  Submit
</button>

Compatibility

This package is compatible with:

• Angular 16, 17, 18, 19+
• Angular Material 16+
• Angular CDK 16+

License

MIT

Repository

https://github.com/h2qutc/angular-material-components