CODEWITHSUNDEEP
angularangular-material2
Vamshi
Vamshi

Reputation: 9331

Extend Angular Component ( Only decorator)

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.

Upvotes: 1

Views: 1172

Answers (2)

elDuderino
elDuderino

Reputation: 1064

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.

Upvotes: 0

Vamshi
Vamshi

Reputation: 9331

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.

Upvotes: 1

Related Questions