Angular2 sub component break css relationship
<p>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:</p>

<p>my parent component</p>

<pre><code>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;
}
</code></pre>

<p>my parent template</p>

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

<p>my child component</p>

<pre><code>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[];

}
</code></pre>

<p>my child template</p>

<pre><code>&lt;div class="card-image white"&gt;
   &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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</p>

<pre><code>&lt;my-single-product
</code></pre>

<p>The rendering of this element breaks the css child relationship. </p>

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