angular2 child comment how to extends parent styles

Question

I have two components, I want inner component extends outside component styles

@Component({
    selector: 'parent',
    style: [ '.panel{width:100px;height:100px;border:1px solid #ccc}' ],
    template: 'parent'
})

class ParentComponent 
{
}

@Component({
    selector: 'child',
    template: '<div class=".panel"></div>'
})

class ChildComponent 
{
}

using like this I want show a square

<parent>
    <child></child>
</parent>

score 3 · Accepted Answer · answered Jan 10 '17 at 14:41

Have a look ViewEncapsulation on for your child component. You could maybe set the view encapsulation to none for the child component so it will inherit the parent styles:

import {ViewEncapsulation} from "@angular/core"
@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'child',
    template: '<div class=".panel"></div>'
})

I have never really tested it for this use-case but you might be able to do something with it.

score 2 · Answer 2 · edited May 23 '17 at 12:17

2

You have the power to give child's css from parent component using >>> selector as shown below,

@Component({
    selector: 'parent',
    style: [ `
           :host >>> child .myCssclass
             {
               width:100px;height:100px;border:1px solid #ccc
             } 
           `],
    template: 'parent'
})

class ParentComponent 
{
}

@Component({
    selector: 'child',
    template: '<div class="myCssclass"></div>'
})

class ChildComponent 
{
}

How to style child components from parent component's css file?

edited May 23 '17 at 12:17

Community

1
1

answered Jan 10 '17 at 14:40

micronyks

54,797
15
112
146

if my using styleUrls ? – Moon Jan 10 '17 at 14:41
styleUrls: [':host >>> child ./parent.css'] ? – Moon Jan 10 '17 at 14:43
No. `stylesUrls` requires external css file. in that file you have to define it and pass that relative path to `styelsUrls` – micronyks Jan 10 '17 at 14:44
Thanks @echonax !! – micronyks Jan 10 '17 at 14:49
1

@micronyks Oh lol, since I also upvoted I thought you can see who upvoted you xD – eko Jan 10 '17 at 14:52

score 0 · Answer 3 · answered Jan 10 '17 at 14:38

The template of the child component should be like this:

template: '<div class="panel"></div>'

The class name should be without the dot ;)

Anyway this is not the Angular question. It belongs to CSS.

Next - the template of the parent should be:

template: '<child></child>'

And in the final template code you may leave just the

<parent></parent>

angular2 child comment how to extends parent styles

3 Answers3