0

I have a custom Angular element - basically HTML input with validation for Number input or Date input. Usage in Angular template:

<div class="input-group">
    <app-input-number 
        formControlName="amount_received"
        ngbAutofocus 
        class="form-control"   
    >
    </app-input-number>

    <div class="input-group-append">
        <span class="input-group-text">USD</span>
    </div>
</div>

Rendered output:

<div _ngcontent-omn-c8="" class="input-group">
 <app-input-number _ngcontent-omn-c8="" class="form-control-host ng-pristine ng-valid ng-touched" formcontrolname="amount_received" ngbautofocus="" _nghost-omn-c10="" ng-reflect-name="amount_received">
  <input _ngcontent-omn-c10="" class="form-control text-right" type="text">
 </app-input-number>

 <div _ngcontent-omn-c8="" class="input-group-append">
  <span _ngcontent-omn-c8="" class="input-group-text">EUR</span>
 </div>
</div>

Problem is the custom element <app-input-number . I see 2 possible solutions:

1/ Modify Bootstrap selector: change .input-group > .form-control to .input-group .form-control , I would like to avoid some hardcoded overwriting. Is there any way how to modify?

2/ Render Angular component without wrapping tag. Is this possible?

Thanks

Luke1988
  • 1,850
  • 2
  • 24
  • 42

1 Answers1

0

If you don't want to add extra custom elements, consider to use directives instead. Angular Material Input component is a great example: https://material.angular.io/components/input/overview

Long Nguyen
  • 49
  • 2
  • Thanks man! I found this - https://stackoverflow.com/questions/46671235/remove-host-component-tag-from-html-in-angular-4 I have some validations and logic in my component, I am not sure what can be moved into directive. – Luke1988 Mar 21 '20 at 12:38