Extend Angular Component ( Only decorator)

Question

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

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

This fails as template is not specified . So I add template too. So, I copy paste 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 it doesn't know what is md-ink-bar and its not exported in angular . Is there anyway I can extend just changing the css.

Can't you just add your own global stylesheet that appends and overrides the built-in styles? That way you don't have to create a new component just to change CSS. — Raven, Jun 16 '17 at 09:45
True. But there are so many changes , the whole styles.scss file is filled with `!important` styles . We will be using this in many projects, thought I will just extend base components and have our own components. Did not expect it would this complicated — Vamshi, Jun 16 '17 at 09:46
Angular Material shouldn't be using any `!important` in their styles. Won't your style automatically overrule it if it's the most recently loaded definition? — Raven, Jun 16 '17 at 09:48
The order of your styles is important. If you want to orverride material css file, make sure to order it before .css that is supposed to override material styles. — Haseoh, Jun 16 '17 at 09:56
I use angular/cli , add my styles in `angular-cli.json` . How can change the order of css loading, angular build will take care of that by itself right? unless I do my own configuration .. may be .. Also, material do not give css, the styles are inbuilt in the components — Vamshi, Jun 16 '17 at 10:00
Enter your `.angular-cli.json` file, find `styles`, it's an array of included styles. Simply copy-paste Angular Material css/scss file before your `styles.scss`. It works like that, because it imports the styles to the project in order that is given in `.angular-cli.json` file. — Haseoh, Jun 16 '17 at 10:03
I have only one entry, my custom scss file. There are no css files for material . Everything added in js files — Vamshi, Jun 16 '17 at 10:05
My co-worker works with material, he uses `.angular-cli.json` file to import Material into project. I assume you have installed Material with npm. To override material decorators first import material: `"../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"`, then `styles.scss` in `styles` tab. — Haseoh, Jun 16 '17 at 10:18
I already have that in my style. At the top of the file ,so everything I write is after that file, so I believe thats overriding. I will still try your method. But it will just override the color values, not the component styles IMO — Vamshi, Jun 16 '17 at 10:20

Vamshi · Answer 1 · 2017-06-16T10:29:43.613

This is a workaround

I created a new directive

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

Source code from How to add CSS to directive

In my HTML,

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

This works for the time being. But still I am curious how to extend components style.

score 0 · Answer 2 · answered Mar 15 '18 at 20:06

This is documented under the guides section of the Angular Material site (it probably wasn't there when the question was posted): https://material.angular.io/guide/customizing-component-styles

It sounds like the issue with your styles is either view encapsulation or specificity.

Extend Angular Component ( Only decorator)

2 Answers2

Linked