CODEWITHSUNDEEP
typescriptangular8angular-ng-if
Anthony PALERMO
Anthony PALERMO

Reputation: 149

NgIf-Else condition does not work properly

I'm a beginner on Angular 8 and I've some difficulties about a part of my code. Indeed, I'm trying using the ngIf Else condition in a to display a button according to the value I retrieve.

<div class="form-group">  
    <div class="row">        
        <div class="input-group col-12 md-12">
            <div class="input-group-prepend">
                <label for="situation" class="input-group-text">Current Situation</label>
            </div>
            <select class="custom-select" id="situation" formControlName="situation" name="situation" [(ngModel)]="employed">
                <option value="employed" name="employed">Employed(including unpaid family workers and apprentices)</option>
                <option value="employed" name="employed">Employed but is temporarily absent(leave without pay, parental leave etc.)</option>
                <option value="unemployed"> Unemployed, looking for work(job seekers)</option>
                <option value="retired"> Retired </ option >
                <option value="unable">Unable to work(disability)</option>
                <option value="domesticWorker"> Woman or man working in their own household(domestic worker)</option>
                <option value="student"> Pupil or Student</option>
                <option value="preschool"> Pre - school child</option>
                <option value="other"> Other(specify) </ option >
            </select>
        </div>
    </div>
</div>

<ng-container *ngIf="employed; then trueCondition else elseTemplate" >
    <div class="btn-toolbar">
        <button class="btn btn-primary" data-toggle="modal" data-target="#householdsFormModal2" data-dismiss="modal" type="button">NEXT</button>
    </div>
</ng-container>
<ng-template #elseTemplate>
    <div class="btn-toolbar">
        <button class="btn btn-primary" data-toggle="modal"
                data-dismiss="modal" type="button"
                [disabled]="householderForm.invalid">SUBMIT</button> 
    </div>
</ng-template>

When I'm choosing the first two option, my button is setting to Next but, when I'm choosing other options it staying to Next state instead of Submit

Upvotes: 0

Views: 2494

Answers (1)

kagmole
kagmole

Reputation: 2165

You are using the ngIfThen syntax which requires trueCondition to be a template as well.

See the Angular NgIf documentation.

<ng-container *ngIf="employed == 'employed'; then trueCondition else elseTemplate"></ng-container>
<ng-template #trueCondition>
    <!-- Content if true -->
</ng-template>
<ng-template #elseTemplate>
    <!-- Content if false -->
</ng-template>

What I think you want is the ngIf syntax, which is *ngIf="employed == 'employed'; else elseTemplate.

<ng-container *ngIf="employed == 'employed'; else elseTemplate">
    <!-- Content if true -->
</ng-container>
<ng-template #elseTemplate>
    <!-- Content if false -->
</ng-template>

Also, be careful to not confuse your ngModel named employed with its actual value that can be a string with the value employed.

The ngModel named employed will always be "truthy", so make sure to check employed == 'employed'.

Upvotes: 1

Related Questions