Use component inner component html template as top level-CodePudding

Edit: I want to basically hide the "app-some-component" from generating at the top level, and only render the inner HTML of that component.

If I define a component with template like this:

<div>Top level div</div>

and reference it like this somewhere else

<app-some-component></app-some-component>

is it possible for

<div>Top level div</div>

...to be what is rendered only as the parent and not the tag generated by the "app-some-component"?

Thank you

CodePudding user response：

In component decorator use:

@Component({
  selector: '[app-some-component]', // instead of ‘app-some-component’
  … 
})

In parent component template use:

<div app-some-component></div>

In app-some-component template just use:

Top level div

CodePudding user response：

Short answer is no, and we won't have the feature in the near future.

I would still argue you need to be a little more specific in what you need to accomplish, because it could all boil down to just regular component interaction (like using @Input/@Output or services), or it could be a scenario like the one I described in my comment:

[...] having the be considered in CSS as a direct child of the parent component, ignoring the host element [...]

There is a solution if your particular issues are layout-related. Let's say you want the elements inside your component to behave as direct children to the upper component to make them fit in with your flex layout, and you can't/don't want to just place the SCSS in the child component itself.

Addressing layout-related issues

One possible approach could be combining HostBinding and the display property:

@HostBinding('style.display') display = 'contents';

This will not make the host element go away, but will assign display: contents to the host element, so the element won't be rendered a box - i.e. the elements will behave as the flex items to the parent component as if app-some-component weren't there.

This also doesn't actually make the elements children to the parent component. You still have to use (descendant combinator) in CSS selectors instead of >, for example, since the element remains selectable.