Extend/Override style of reusable angular2 component

Question

Assuming we want to use a component from some library in angular2 (example from material2). The component annotation looks like this:

@Component({   moduleId: module.id,   selector: 'md-input',   templateUrl: 'input.html',   styleUrls: ['input.css'],   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],   host: {'(click)' : 'focus()'} }) 

This component ships with a "default" stylesheet, the "input.css". If we use this component in our app we likely want to override/extend some of the style, without copying and manipulating the component itself. How to do this?

Possible Solution 1: Set the Encapsulation to "ViewEncapsulation.None":
This is not really a solution, just a workaround.

Possible Solution 2: Use "::shadow" or "/deep/" in CSS:
Works also, but its deprecated according to WebComponent spec.

Possible Solution 3: Use global CSS and override the component CSS:
Works also, but it violates the shadow DOM concept.

Possible Solution 4: Override directly in the template of parent component:

Example:

<my-cmp [font-size]="100"></my-cmp> 

Is not really suitable if we do a lot of overriding.

Possible Solution 5: Override or extend the "@Component" definition with an additional stylesheet somehow:
This seems to be the only correct solution (at least for me). But i have no idea how to do this...

Any advice on this? Maybe i got something wrong... Thanks.

Answer 1

In Angular 4, We can override the style with the ::ng-deep pseudo-class selector from the inherited class style sheet.

:host ::ng-deep element {     //your style here } 

For more information refer http://blog.angular-university.io/angular-ngclass-ngstyle/