Extend Angular Component (decorator only)

Question

I am trying to extend the Angular Material component to provide custom CSS. I want to use the same component, but just change the CSS. If its the theme, I can change the properties, but I want to change the style hardcoded in the component. So, I'm trying to expand a component. Here is what I did.

@Component({ selector: 'my-tab-nav-bar', styles: [``] // custom css here }) export class TabNavBarComponent extends MdTabNavBar { } 

This does not work because the template is not specified. Therefore, I also add a template. So, I will copy the template.

 @Component({ selector: 'my-tab-nav-bar', template: `<div class=\"mat-tab-links\"> <ng-content></ng-content> <md-ink-bar></md-ink-bar> </div> `, styles: [``] // custom css here }) export class TabNavBarComponent extends MdTabNavBar { } 

Now the problem is that he does not know what md-ink-bar and is not exported to Angular. In any case, I can only expand the css change.

Answer 1

Workaround

I created a new directive

 @Directive({ selector: '[myTabNavBar]', }) export class TabNavBarDirective { @HostBinding('style.background-color') backgroundColor: string = 'yellow'; } 

Source Code How to Add CSS to a Directive

In my HTML

  <nav myTabNavBar md-tab-nav-bar flex> 

It works for now. But still I'm curious how to expand the style of the components.