Angular2 selector tag breaks css parent/child relationship

Question

I have a template that is heavily dependent on parent child relationships when it comes to CSS styling.

A tag(selector) wraps the component markup (html). Is there a way to hide that ? or is that a feature of angular2 and no workaround is possible?

I understand they seem to have replaced the "replace:true" option in the directives in angular1

Thanks!

could you post some code to help understand what the issue is? — Bean0341, Dec 20 '16 at 22:08
Same question here http://stackoverflow.com/q/41249483/2593877 — Logan H, Dec 20 '16 at 22:21

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

Similar question and answer here

Give this a shot, if you don't want <special-comp></special-comp> elements and would like <div special-comp></div> instead.

BUT Angular 2 warns you not to do this in their STYLE GUIDE

in your parents view

<div>
    <div special-comp></div>
</div>

and then in your child's component

import { Component, Input } from '@angular/core'
@Component({
    selector: "[special-comp]",
    templateUrl: "./path/to/template.html"
})

export class MyChildComponent {
    ...
}

This will create a div with a property special-comp RATHER than creating a html element <special-comp>

So when you inspect in chrome you will see

<div special-comp></div>

RATHER than

<special-comp></special-comp>

edited May 23 '17 at 10:31

Community

1
1

answered Dec 20 '16 at 22:26

Logan H

3,383
2
33
50

That would be correct. I was about to answer my own question :) – DOMZE Dec 20 '16 at 22:31
Haha nice! Glad you figured it out! – Logan H Dec 20 '16 at 23:59

Angular2 selector tag breaks css parent/child relationship

1 Answers1