Styling not applying to child component
It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation
attribute, as described below:
import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
selector:'test-component',
styleUrls: ['test.component.css'],
templateUrl: './test.component.html',
directives:[TestApp],
encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{
}
See this plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.
When using the styleUrls property, the styles are local to the one component, not to its children. So I made two changes: 1) Moved the styleUrls to the testapp component. 2) Moved the div to the testapp component.
import {Component} from '@angular/core';
@Component({
selector:'testapp',
styleUrls: ['./test.component.css'],
template: `
<div class="test">
<a href="https://www.google.com">Google</a>
</div>
`
})
export class TestApp{
}