Components: Inherit/Extend angular material components

Created on 1 Mar 2018 · 11Comments · Source: angular/components

Use case: I want to disable a specific animation in the select component (the @transformPanel animation), in order to do so i just need to override the template or the animation property of the components annotation, or to copy the whole MatSelect component to my project / fork Angular Material and to maintain it or to write my own component in CDK. #2194 #9216

Angular still doesn't support Annotation/Metadata inheritance, but there where some links to the new Ivy Renderer / Angular v6 Compiler.

CDK is nice but to construct a select component to be as good as the MatSelect component is a lot of work, we used to copy the code from the original MatSelect component but it's hard to maintain it with Material/CDK updates.

Solving this problem would allow end-developer to reimplement individual functions of the base class/component the best example is the new disableOptionCentering property - it won't be needed because the end-developer could do it easily.

Any best practice or under development for this case ?

Source

ghost

❤10 👍9

Most helpful comment

RoshanRoyal on 5 Oct 2018

👍10

All 11 comments

One solution to this problem is the following, so i can define my own animation or disable it in ./select-animations.ts or in the custom .html file. But it would be much much better if the @Component annotation could be inherited, the code would be much more clear.
Should there be some official documentation for it in the angular material docs ?

See also:
[Miskos comment](https://github.com/angular/angular/issues/7968#issuecomment-219865739 )

    import { ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
    import { MAT_OPTION_PARENT_COMPONENT } from '@angular/material/core';
    import { MatFormFieldControl } from '@angular/material/form-field';

    import { MatSelect } from '@angular/material';
    import { matSelectAnimations } from './select-animations';

    @Component({
        moduleId: module.id,
        selector: 'ab-select',
        exportAs: 'abSelect',
        templateUrl: 'select.component.html',
        inputs: ['disabled', 'disableRipple', 'tabIndex'],
        encapsulation: ViewEncapsulation.None,
        preserveWhitespaces: false,
        changeDetection: ChangeDetectionStrategy.OnPush,
        host: {
            'role': 'listbox',
            '[attr.id]': 'id',
            '[attr.tabindex]': 'tabIndex',
            '[attr.aria-label]': '_ariaLabel',
            '[attr.aria-labelledby]': 'ariaLabelledby',
            '[attr.aria-required]': 'required.toString()',
            '[attr.aria-disabled]': 'disabled.toString()',
            '[attr.aria-invalid]': 'errorState',
            '[attr.aria-owns]': 'panelOpen ? _optionIds : null',
            '[attr.aria-multiselectable]': 'multiple',
            '[attr.aria-describedby]': '_ariaDescribedby || null',
            '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
            '[class.mat-select-disabled]': 'disabled',
            '[class.mat-select-invalid]': 'errorState',
            '[class.mat-select-required]': 'required',
            'class': 'mat-select',
            '(keydown)': '_handleKeydown($event)',
            '(focus)': '_onFocus()',
            '(blur)': '_onBlur()',
        },
        animations: [
            matSelectAnimations.fadeInContent,
            matSelectAnimations.transformPanel
        ],
        providers: [
            { provide: MatFormFieldControl, useExisting: AbSelect },
            { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: AbSelect }
        ],
    })
    export class AbSelect extends MatSelect {}

ghost on 1 Mar 2018

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

jelbourn on 7 Mar 2018

😕7 👎6

Were you able to ended the components in the end without duplicate code that already existed in the library? I tried to "extend" the card component but it isn't as simple as my-mat-card extend mat-card.

NHKK on 10 Mar 2018

👍4

You have to look a lot at the sourcecode of the component. The bad thing is rlthat almost everyting is private and not protected.
Another solution is to fork the project on github and to maintain your version but i think this is more overhead than just to extend the component.

ghost on 11 Mar 2018

👍6

I believe this should be considered as a feature request.

andrewtw on 14 Sep 2018

👍5

RoshanRoyal on 5 Oct 2018

👍10

Actually, it would be so adorable to have this kind of feature...

liesahead on 10 Dec 2018

👍8

Yeah I spent days looking to extend a component, but as someone mentioned everything is private , it would be nice to be able to extend because a lot of the component don't fit our use scenario and not being able to extend is definitely a big problem for us.