Angular2 sub component break css relationship

Question

I am creating another component (ParentComponent2) that will need the same exact html that ParentComponent1 needs, so I created a child component and will extended it to where I need:

my parent component

import { Component, Input } from '@angular/core'
import { CategoryList } from "./metadata.service.dtos"
import { MyChildComponent } from "./my-child.component"

@Component({
    selector: "my-parent",
    templateUrl: "/js/app/templates/my_parent.html"
})
export class ParentComponent1 {
    categories: CategoryList[];
    this.categories = this.metadataService.categories;
}

my parent template

<ul materialize="collapsible" class="collapsible" data-collapsible="collapsible" [materializeParams]="params">
    <li>
        <div class="collapsible-header">
            My Products
        </div>
        <div class="collapsible-body">
            <div class="card horizontal hoverable lighten-4 my-product" *ngFor="let product of products">                         
                <my-single-product [categories]="categories"></my-single-product>
            </div>
        </div>
    </li>
</ul>

my child component

import { Component, Input } from '@angular/core'
import { CategoryList } from "./metadata.service.dtos"
@Component({
    selector: "my-single-product",
    templateUrl: "/js/app/templates/my-single-product.html"
})

export class MyChildComponent {
    @Input() categories: CategoryList[];

}

my child template

<div class="card-image white">
   <div></div>
</div>

It works, but the css is all messed up and completely different now than it was before I extended the html inside the child. The reason is that this element is being rendered in final html

<my-single-product

The rendering of this element breaks the css child relationship.

Is there a way to stop this element from being shown and only show its html content?

What's exactly messed? Can you create a plunker? You can always use attribute selector if you don't want to have custom tag — yurzui, Dec 20 '16 at 19:10
@yurzui good option, similar to this question: http://stackoverflow.com/a/34589018/1019042 — user1019042, Dec 20 '16 at 21:35

Logan H · Accepted Answer · 2016-12-20T21:48:26.120

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

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

in your parents view

<ul materialize="collapsible" class="collapsible" data-collapsible="collapsible" [materializeParams]="params">
    <li>
        <div class="collapsible-header">
            My Products
        </div>
        <div class="collapsible-body">
            <div class="card horizontal hoverable lighten-4 my-product" *ngFor="let product of products">                         
                <div my-single-product [categories]="categories"></div>
            </div>
        </div>
    </li>
</ul>

and then in your child's component

import { Component, Input } from '@angular/core'
import { CategoryList } from "./metadata.service.dtos"
@Component({
    selector: "[my-single-product]",
    templateUrl: "/js/app/templates/my-single-product.html"
})

export class MyChildComponent {
    @Input() categories: CategoryList[];

}

This will create a div with a property my-single-product RATHER than creating a html element <my-single-product>

So when you inspect in chrome you will see

<div my-single-product></div>

RATHER than

<my-single-product></my-single-product>

And your css should be fine now

if style guid warns from doing this, what is the recommended approach for solving this problem, introducing extra tags in the dom does break style, especially bootstrap styling — Shamseer Ahammed, Aug 20 '22 at 07:39

Angular2 sub component break css relationship

1 Answers1

Linked