Proposal

I'd like an <ng-host> that would act in a similar way as the :host css property. That would apply directives and classes to the host component. Related #8785

Current behavior

my-component.template.ts

<div>1</div>
<div>2</div>

Currently to apply a class flex to the host component one can

1. use host in the component decorator (or @HostBinding);
2. use a wrapping element
3. apply the class on the host from the parent template.

All of which are suboptimal.

1. Host

@Component({
 //... 
host: { class : 'flex' }
})

(Same applies for @HostBinding()).
Class declarations belongs in my template. Directives don't work here

2. Wrapper

<div class="flex">
  <div>1</div>
  <div>2</div>
</div>

Adds an additional tag.

3. Defining in parent

<my-component class="flex">

Leaks implementation outside the component itself.

Expected behavior

<ng-host class="flex">
 <div>1</div>
 <div>2</div>
<ng-host>

result

  <my-component class="flex">
    <div>1</div>
   <div>2</div>
 </my-component>

Compiling wrong usages

1. multiple ng-host

<ng-host class="flex"><ng-host>
<ng-host class="flexEnd">
  <div>1</div>
  <div>2</div>
<ng-host>

2. Multiple ng-host nested

<ng-host class="flex">
    <ng-host class="flexEnd">
        <div>1</div>
        <div>2</div>
    <ng-host>
<ng-host>

3. ng-host not used as the topmost component

<div> 1
     <ng-host class="flex flexEnd"><ng-host>
</div>
<div>2</div>

solution 1

Strictly speaking it would make sens to have those be invalid.

solution 2

ng-host act as a strict link to the host. Meaning that the above scenarios would result, in all cases, in this

<my-component class="flex flexEnd">
  <div>1</div>
  <div>2</div>
</my-component>

Thus when the compiler finds a ng-host element it just links whatever it finds to the host. No matter where it's put. I find this a bit less intuitive but could be easier to implement.

solution 3

<li> <ng-host></ng-host> </li>

compiles to this

<li><my-component></my-component></li>