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?
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 you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With