(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?