Search code examples
angularcss-grid

Angular wraps a component w a div

using angular 8 trying to build a form using CSS grid I want to loop over a collection of fields and render the HTML

I have a uds-form component with this as the HTML template

I can make this work by just hard coding the HTML for 1 field. It will show the html correctly laid out in the grid.

   <div  class="formgrid"  style="border:solid 3px red;">
        <ng-container *ngFor="let setting of settings; let i = index">
     
            <input type="text"
           formControlName="SampleField"
           name="SampleField"
           placeholder="Sample Field"
           />
           <label class="fieldLabel" for="SampleField">Sample Field :</label>
           <span class="fieldErrorMessage">  err msg</span>
  
            
        </ng-container>
        
    </div>

I am trying to use a component so I can have logic that correctly renders the appropriate HTML based on the data type of each field

<div  class="formgrid"  style="border:solid 3px red;">
    <ng-container *ngFor="let setting of settings; let i = index">
 
        <app-uds-form-item    [myFormGroup]=myFormGroup [setting]=setting></app-uds-form-item>    
 
        
    </ng-container>
    
</div>

When I do this, it wraps the HTML of the component in a div and that throws off the grid.

enter image description here

My question is whether it is possible to NOT wrap the app-uds-form-item html in a parent element.

I am open to any solution. I am not very clear on my options w/ Angular so I am considering changing my CSS grid so it can possibly overlook the extra div. I am also considering just joining the form level component and the item level component. But that really seems like accepting bad design to cover my lack of understanding of Angular...

I believe a cleaner solution would be to let Angular just give me the HTML I need in the item component. Struggling with how to make that happen.

Solution

  • I can not find an answer. I am reading more on the content projection functionality in Angular.

    For now, I have combined the form component and the form item component.