How remove angular selector in ng-content

Question

I have this imbrication of component

  <form [formGroup]="form" novalidate autocomplete="off" (ngSubmit)="onSubmit()">
    <app-form-field label="Input" [required]="true" [control]="form.controls['input']">
      <app-input formControlName="input"></app-input>
    </app-form-field>
  </form>

this is a render of the DOM:

How can i remove the app-input angular selector and just keeping input tag please?

I need this for works with ~ or > css operator

Thanks for your help

Answer 1

You can't remove the <app-input> selector, but there may be other solutions to your problem:

• If you don't actually have any logic in <app-input> that you need, just replace this with a native <input>. formControlName will work on native <input> tags out of the box (as long as you have imported the ReactiveFormsModule), you don't always need a component
• If you do have a need for the app-input component
  • Use classes on descendent elements instead of > or ~ to specifically target the elements you want to style no matter how they are nested

  <form [formGroup]="form">
    <app-form-field>
      <app-input formControlName="input" class="form-control"></app-input>
    </app-form-field>
  
    <app-form-field>
      <input type="checkbox" formControlName="input2" class="form-control" />
    </app-form-field>
  
    <input type="radio" formControlName="input3" class="form-control" />
  </form>
  

  • Use a combination of selectors, e.g.

  form app-form-field > *,
  form app-form-field app-input input {
    // your style
  }