2

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?

user1019042
  • 2,428
  • 9
  • 43
  • 85
  • 3
    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

1 Answers1

5

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

Logan H
  • 3,383
  • 2
  • 33
  • 50
  • 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