Reference Angular/Ionic component from another file without adding a directive for it

user_2721727 0
Viewed 97

I have the following Angular/Ionic component inside field.html:

<ng-template #mainField let-uiComponent>
    <ion-label position="stacked">{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
    <ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>
        <ion-input  *ngSwitchCase="'NUMBER'" type="number" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-input>

        <ion-datetime *ngSwitchCase="'DATE'" display-format="MMM DD, YYYY" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-datetime>
    </ng-container>
</ng-template>

<ng-template #checkboxField let-uiComponent>
    <ion-item>
        <ion-label>{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
        <ion-checkbox checked="{{fieldValue}}" value="uiComponent.getAttribute('FIELD_NAME')" slot="start"></ion-checkbox>
    </ion-item>
</ng-template>

<ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>

    <ng-container *ngSwitchCase="'CHECKBOX'" >
        <ng-container  *ngTemplateOutlet="checkboxField; context:{ $implicit: uiComponent }"></ng-container>
    </ng-container>


    <ng-container *ngSwitchDefault>
        <ng-container *ngTemplateOutlet="mainField; context:{ $implicit: uiComponent }">
        </ng-container> 
    </ng-container>

</ng-container>

In this component we have multiple templates to draw a field based on a certain type. The component works fine, but when we add a lot of field types (let us say 15 types) the code becomes hard to track. Therefore, we decided to separate each field type into a dedicated file and created the following component checkbox.html:

<ion-item>
    <ion-label>{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
    <ion-checkbox checked="{{fieldValue}}" value="uiComponent.getAttribute('FIELD_NAME')" slot="start"></ion-checkbox>
</ion-item>

and updated our field component to be as follows:

<ng-template #mainField let-uiComponent>
    <ion-label position="stacked">{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
    <ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>
        <ion-input  *ngSwitchCase="'NUMBER'" type="number" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-input>

        <ion-datetime *ngSwitchCase="'DATE'" display-format="MMM DD, YYYY" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-datetime>
    </ng-container>
</ng-template>

<ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>

    <ng-container *ngSwitchCase="'CHECKBOX'" >
            <field-checkbox [uiComponent]="uiComponent"></field-checkbox>
    </ng-container>


    <ng-container *ngSwitchDefault>
        <ng-container *ngTemplateOutlet="mainField; context:{ $implicit: uiComponent }">
        </ng-container> 
    </ng-container>

</ng-container>

After that we noticed that an extra HTML element field-checkbox was added to the UI, see it highlighted on the below screenshot: enter image description here

How can we refactor the code to separate different UI components but without having this element to be added to the UI? This is important since it breaks some CSS when adding that extra element to the UI.

ionic4 ionic-framework angular
1 Answers

It might not be possible as breaking down a component into several small components will definitely add a new tag. In your example: field-checkbox.

I think you need to solve the css styling issue so that it doesn't break. For example Target any child element rather than direct decendents in your css rules.

user_127479500
Related