Repository: angular
Issue: How do I get my Angular 6 components to inherit it's extended component's styles?
Labels: feature,area: core,core: stylesheets,core: component extension and customization,feature: under consideration

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[?] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Performance issue
[?] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
I have a angular library (`ng generate library shared`) with a `BaseComponent` in, I want to be able to extend that component in another project and keep the styles of both the `BaseComponent` and the new component (`AnotherComponent`).

I basically want to extend a component and inherit it's styles, but the `AnotherComponent` is not inheriting the `base-component.css`.

Am I doing something stupid?

It would be cool to be able to add it in the `AnotherComponent` style array but since it's bundled I guess this won't work.

```
styleUrls: BaseComponent.styleUrls.concat(["./another.component.css"])
```

# This is basically what i want to achieve:

```
styleUrls: ['./base/base.component.css', "./another.component.scss"]
```

## or a property

```
inheritStyles: true
```

## or a "super"/import in the files

### `another.component.scss`
```
@import [EXTENDED COMPONENT]
```

but since base is actually in it's own Angular library in another Node module, it's not accessible like this.

Hope this makes sense.

## Expected behavior
<!-- Describe what the desired behavior would be. -->

To be able to extend components and keep the template and styles of the extended component.

## Minimal reproduction of the problem with instructions


### base.component.ts

```
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-base',
      templateUrl: './base.component.html',
      styleUrls: ['./base.component.css']
    })
    export class BaseComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
      }
    
    }
```

### another.component.ts
```
    import { Component } from '@angular/core';
    import { BaseComponent } from 'shared-library';
    
    @Component({
      selector: 'app-another',
      templateUrl: './another.component.html'
    })
    export class AnotherComponent extends BaseComponent {
      title = 'app';
    }
```

## What is the motivation / use case for changing the behavior?

I have a few websites with the same components ("shared components"), but a few need some extra logic, markup or styles.

## Environment

<pre><code>
Angular version: 6.0.3

Browser:
- [x] Chrome (desktop) Version 66.0.3359.181 (Official Build) (64-bit)
 
For Tooling issues:
- Node version: v10.2.1
- Platform:  Mac OS High Sierra