angular2 and ngIf - test if greater or less than

Question

How do I make this work? If value is 9 or less, display "Month", else display "Months". Here's my code:

<select id="analysis_horizon" class="custom-select form-control" [(ngModel)]="basic_setup.analysis_horizon" formControlName="analysis_horizon" describedby="basic-addon_analysis_horizon">
    <option disabled>Select Analysis Horizon</option>
    <option *ngIf="'i<=9'" *ngFor="let i of analysis_horizon_array">{{i}} Month</option>
    <option *ngIf="'i>9'" *ngFor="let i of analysis_horizon_array">{{i}} Months</option>
</select>

This is the error I get:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("isabled>Select Analysis Horizon ]*ngFor="let i of analysis_horizon_array">{{i}} Month {{i}} Month 9'" [ERROR ->]*ngFor="let i of analysis_horizon_array">{{i}} Months ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("isabled>Select Analysis Horizon ]*ngFor="let i of analysis_horizon_array">{{i}} Month {{i}} Month 9'" [ERROR ->]*ngFor="let i of analysis_horizon_array">{{i}} Months

Answer 1

You can't use multiple template bindings on one element, in this case *ngIf and *ngFor. You can achieve what you want with interpolation and ternary operator, you don't need to use *ngIf directive:

<select id="analysis_horizon" class="custom-select form-control" [(ngModel)]="basic_setup.analysis_horizon" formControlName="analysis_horizon" describedby="basic-addon_analysis_horizon">
    <option disabled>Select Analysis Horizon</option>
    <option *ngFor="let i of analysis_horizon_array">
        {{i}} {{ i <= 9 ? "Month" : "Months" }}
    </option>
</select>