从 Angular Material 组件扩展

Question

In my angular project I want to extend/inherit from angular material components instead of using material component itself(eg not mat-checkbox but just a regular checkbox which extends mat-checkbox). In this way i want to inherit all properties and methods from mat checkbox. Unfortunately I'm facing with a compilation error. Bellow you can find the link for stackblitz where you can take a look on the project and the error itself

https://stackblitz.com/edit/angular-material-hulqfu?file=app%2Fcheckbox%2Fcheckbox.component.ts

Please take a look at the error in the console.

Answer 1

In order to be able to inherit from any Material component you need to first, as obvious it may seem, install and add the library to the project: https://material.angular.io/guide/getting-started .

Afterwards, I would recommend you to verify whether everything has been set correctly by trying to use the MatCheckbox in the AppComponent (or any already declared component). Remember to previously add the MatCheckboxModule to the AppModule (or its corresponding module) in the imports section.

Once you don't have any kind of errors, then you can create a component which extends from the respective Material component. Don't forget to import it in the declarations section.

That should work since it is just Typescript inheritance, although I'm not sure what is exactly what you're looking to accomplish and whether inheritance is the best way to approach it.