Add nodes just after a component (not inside) in Angular 7

readme.md

Add nodes just after a component (not inside) in Angular 7

For example we have radio-input and want to create a custom view. But no elements allowed inside input element.

<label>
  <input type="radio" uiRadio ...>
  Option A
</label>

ui-radio.component.html

<ng-template #checkTemplate>
  <label class="check" ...></label>
</ng-template>

ui-radio.component.ts

@Component({
  selector: 'input[type="radio"][uiRadio]',
  ...
})
export class UiRadioComponent ... {
  ...
  constructor(
    private vcr: ViewContainerRef,
    private elRef: ElementRef,
    ...
  ) {
  }
  
  ngAfterViewInit() {
    const viewRef = this.vcr.createEmbeddedView(this.checkTemplate);
    // ViewRef extends ChangeDetectionRef, needed for bindings update after projecting.
    viewRef['detectChanges']();
  }
}

Then you can style .check element as you want, it will be just after the input.

---

Implemented UiRadio in ngx-kit: https://github.com/ngx-kit/ngx-kit/tree/master/packages/collection/lib/ui-radio/ui-radio