CODEWITHSUNDEEP
angularng-content
orphen92300
orphen92300

Reputation: 115

How remove angular selector in ng-content

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: enter image description here

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

Upvotes: 0

Views: 249

Answers (1)

nate-kumar
nate-kumar

Reputation: 1771

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
}

Upvotes: 0

Related Questions