Better way than multiple ngIf

Question

I want to make my code shorter so it could be readable. I have a multiple ngIf with different conditions for a numbering order of a list (eg 1, 1.1 , 1.1.1)

Here is my code at template side

<span *ngIf="types.inputs.length > 1 && inputs.input.length > 1 && inputs.hasMultipleInput == true && inputs.hasMultipleSummaries == false && input.designSummaries.length == 1">{{in+1}}.{{inp+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && inputs.input.length > 1 && inputs.hasMultipleInput == true && inputs.hasMultipleSummaries == true && input.designSummaries.length == 1">{{in+1}}.{{inp+1}}.{{s+1}} ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == true && inputs.input.length == 1 && input.designSummaries.length == 1">{{in+1}}.{{inp+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == false && inputs.input.length == 1 && input.designSummaries.length == 1">{{in+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == true && inputs.input.length == 1 && input.designSummaries.length > 1">{{in+1}}.{{inp+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == false && inputs.input.length == 1 && input.designSummaries.length > 1">{{in+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length > 1 && input.designSummaries.length > 1">{{inp+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && inputs.input.length > 1 && input.designSummaries.length > 1">{{in+1}}.{{inp+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length > 1 && input.designSummaries.length == 1">{{inp+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length == 1 && input.designSummaries.length > 1">{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length == 1 && input.designSummaries.length == 1">({{sum.summary}})</span>

This will be repeated in other column and with some additonal interpolation and i just dont want to use this long code in my entire project.

I just want any suggestions from you guys :)

My code on stackblitz

Answer 1

You should put all your logic in a method (let's say getNumberingOrder()) that returns the desired string and simply display it with : <span>{{getNumberingOrder()}}</span>.

Of course, you will pass parameters to this function.