Dynamic components and Ionic grid system

(please read till the end, my question is there)

I’m using dynamic components from Angular in my Ionic project to build dynamic pages. I created a component for a collapsible container and one each for ion-grid, ion-row and ion-col.

Collapsible container:

<div>
	<ion-item lines="none" (click)="setOpen(!isOpen)" color="primary" style="margin-bottom: 4px;">
		<ion-icon *ngIf="isOpen" name="arrow-dropdown"></ion-icon>
		<ion-icon *ngIf="!isOpen" name="arrow-dropup"></ion-icon>
		<ion-label>{{title}}</ion-label>
	</ion-item>
	<div [hidden]="!isOpen" style="padding-left: 20px; padding-right: 20px;">
		<ng-template #container></ng-template>
	</div>
</div>

ion-grid:

<ion-grid>
	<ng-template #grid></ng-template>
</ion-grid>

ion-row:

<ion-row>
	<ng-template #row></ng-template>
</ion-row>

ion-col:

<ion-col [size]="size">
	<ng-template #col></ng-template>
</ion-col>

When nesting them and placing content into the last child (ion-col), i get this, which doesn’t look like a grid anymore:


This is the generated HTML:

<app-dyn-collapsable-container _nghost-iig-c7="">
   <div _ngcontent-iig-c7="">
      <ion-item _ngcontent-iig-c7="" color="primary" lines="none" style="margin-bottom: 4px;" ng-reflect-color="primary" ng-reflect-lines="none" class="item-label ion-color ion-color-primary item md item-lines-none ion-focusable hydrated">
         <!--bindings={
            "ng-reflect-ng-if": "true"
            }-->
         <ion-icon _ngcontent-iig-c7="" name="arrow-dropdown" ng-reflect-name="arrow-dropdown" role="img" class="md hydrated" aria-label="arrow dropdown"></ion-icon>
         <!--bindings={
            "ng-reflect-ng-if": "false"
            }-->
         <ion-label _ngcontent-iig-c7="" class="sc-ion-label-md-h sc-ion-label-md-s md hydrated">Test</ion-label>
      </ion-item>
      <div _ngcontent-iig-c7="" style="padding-left: 20px; padding-right: 20px;">
         <!---->
         <app-dyn-grid _nghost-iig-c8="">
            <ion-grid _ngcontent-iig-c8="" class="md hydrated">
               <!---->
               <app-dyn-grid-row _nghost-iig-c9="">
                  <ion-row _ngcontent-iig-c9="" class="md hydrated">
                     <!---->
                     <app-dyn-grid-row-col _nghost-iig-c10="">
                        <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
                           <!---->
                           <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 1</span></app-dyn-input>
                        </ion-col>
                     </app-dyn-grid-row-col>
                     <app-dyn-grid-row-col _nghost-iig-c10="">
                        <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
                           <!---->
                           <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 2</span></app-dyn-input>
                        </ion-col>
                     </app-dyn-grid-row-col>
                     <app-dyn-grid-row-col _nghost-iig-c10="">
                        <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
                           <!---->
                           <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 3</span></app-dyn-input>
                        </ion-col>
                     </app-dyn-grid-row-col>
                     <app-dyn-grid-row-col _nghost-iig-c10="">
                        <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
                           <!---->
                           <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 4</span></app-dyn-input>
                        </ion-col>
                     </app-dyn-grid-row-col>
                     <app-dyn-grid-row-col _nghost-iig-c10="">
                        <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
                           <!---->
                           <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 5</span></app-dyn-input>
                        </ion-col>
                     </app-dyn-grid-row-col>
                  </ion-row>
               </app-dyn-grid-row>
            </ion-grid>
         </app-dyn-grid>
      </div>
   </div>
</app-dyn-collapsable-container>

But when placing the grid directly in the collapsible container, I get the following (and expected) output:

<div>
	<ion-item lines="none" (click)="setOpen(!isOpen)" color="primary" style="margin-bottom: 4px;">
		<ion-icon *ngIf="isOpen" name="arrow-dropdown"></ion-icon>
		<ion-icon *ngIf="!isOpen" name="arrow-dropup"></ion-icon>
		<ion-label>{{title}}</ion-label>
	</ion-item>
	<div [hidden]="!isOpen" style="padding-left: 20px; padding-right: 20px;">
		<!-- <ng-template #container></ng-template> -->

		<ion-grid>
			<ion-row>
				<ion-col size="6">col 1</ion-col>
				<ion-col size="6">col 2</ion-col>
				<ion-col size="6">col 3</ion-col>
				<ion-col size="6">col 4</ion-col>
				<ion-col size="6">col 5</ion-col>
			</ion-row>
		</ion-grid>
	</div>
</div>


With folling generated HTML:

<app-dyn-collapsable-container _nghost-tfd-c7="">
   <div _ngcontent-tfd-c7="">
      <ion-item _ngcontent-tfd-c7="" color="primary" lines="none" style="margin-bottom: 4px;" ng-reflect-color="primary" ng-reflect-lines="none" class="item-label ion-color ion-color-primary item md item-lines-none ion-focusable hydrated">
         <!--bindings={
            "ng-reflect-ng-if": "true"
            }-->
         <ion-icon _ngcontent-tfd-c7="" name="arrow-dropdown" ng-reflect-name="arrow-dropdown" role="img" class="md hydrated" aria-label="arrow dropdown"></ion-icon>
         <!--bindings={
            "ng-reflect-ng-if": "false"
            }-->
         <ion-label _ngcontent-tfd-c7="" class="sc-ion-label-md-h sc-ion-label-md-s md hydrated">Test</ion-label>
      </ion-item>
      <div _ngcontent-tfd-c7="" style="padding-left: 20px; padding-right: 20px;">
         <ion-grid _ngcontent-tfd-c7="" class="md hydrated">
            <ion-row _ngcontent-tfd-c7="" class="md hydrated">
               <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 1</ion-col>
               <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 2</ion-col>
               <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 3</ion-col>
               <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 4</ion-col>
               <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 5</ion-col>
            </ion-row>
         </ion-grid>
      </div>
   </div>
</app-dyn-collapsable-container>

My question now is:
It seems the extra tags created (like “app-dyn-grid-row”) interfer somehow with the grid system, is there a way to fix this?

If you don’t get any better answers, I would suggest ditching Ionic’s grid. I find ordinary CSS grid layout to be easier to work with, anyway, and will not suffer from this limitation.