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.


<strong>This is a workaround</strong>

I created a new directive

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

Source code from <a href="https://stackoverflow.com/questions/35915433/angular2-styles-in-a-directive" rel="nofollow">How to add CSS to directive</a>

In my HTML,

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

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


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

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


  • Parsing pair of strings fails. Bad spirit x3 grammar
  • How to overcome jar dependency hell when multiple modules use the same jar?
  • Which reference source does include Microsoft.VisualBasic?
  • Safari doesn't call iframe onload when src is not valid site
  • python import fails when called from PHP
  • ORA-12154: TNS:could not resolve the connect identifier specified
  • How to escape colon (:) character while executing native SQL queries against an Informix database us
  • Streaming data from a NVarchar(Max) column using c#
  • PDF: How to Optimize Filesize & Convert to PNG (embedded fonts problem)
  • How to set a thread specific environment variable in Python?
  • Defining a method whose return type is the singleton type of an argument of that method
  • Symfony2 redirect to https route fails (uses wrong port)
  • ASPNetCore MVC Routing Let Server Handle Specific Route
  • Emacs lua-mode issue: (void-function interactively-called-p)
  • Want to understand iframe breakout code
  • Most efficient way to move table rows from one table to another
  • npm 5.4.1 install/uninstall all failing
  • std::remove_copy_if_ valgrind bytes in block are possibly lost in loss record
  • Django invalid literal for int() with base 10
  • Run multiple queries from 1 SQL file showing result in multiple tables
  • xtable package: Skipping some rows in the output
  • Xcode 4 NSLog Macro link in Xcode 3
  • Functions in global context
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • C++ Partial template specialization - design simplification
  • how to do an event when i swipe from fragment to the other
  • Running a C# exe file
  • Akka Routing: Reply's send to router ends up as dead letters
  • XCode can't find symbols for a specific iOS library/framework project
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • unknown Exception android
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal