The NgIf-Else statement is functioning incorrectly

Question

The NgIf-Else statement is functioning incorrectly

As a novice in Angular 8, I am facing some challenges with a section of my code. Specifically, I am attempting to utilize the ngIf Else condition within a div to display a button based on the retrieved value.

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

Even when selecting other options, my button remains in the "Next" state instead of changing to "Submit." Can anyone assist me with this issue?

typescript angular8 angular-ng-if

Answer 1

Answer №1

Utilizing the syntax of ngIfThen necessitates trueCondition to also function as a template.

To learn more, refer to the Angular NgIf documentation.

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

Perhaps what you intended to use was the ngIf syntax, represented as

*ngIf="employed == 'employed'; else elseTemplate

.

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

Furthermore, ensure not to mix up your ngModel named employed with its value, which may be a string set as employed.

The ngModel named employed will always hold a "truthy" value, hence validate using employed == 'employed'.

Answer 2

Utilizing the syntax of ngIfThen necessitates trueCondition to also function as a template.

To learn more, refer to the Angular NgIf documentation.

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

Perhaps what you intended to use was the ngIf syntax, represented as

*ngIf="employed == 'employed'; else elseTemplate

.

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

Furthermore, ensure not to mix up your ngModel named employed with its value, which may be a string set as employed.

The ngModel named employed will always hold a "truthy" value, hence validate using employed == 'employed'.

The NgIf-Else statement is functioning incorrectly

Answer №1

Similar questions

Retrieve a list of all file names within a designated directory using Angular

Jasmine attempting to access a nonexistent property

Exploring Geofirestore's capabilities with advanced query functionalities

What is the best way to encapsulate a child's properties within a function?

Ensuring Mongoose Schema complies with an external API

Waiting for the response from $http in Angular2

The latest release of Angular2, rc1, eliminates all parameters that are not in

Enhance React component props for a styled component element using TypeScript

The argument provided needs to be a function, but instead, an object instance was received, not the original argument as expected

CodeBlast: A Kid's Game

"Exploring the array functionality of Angular's Reactive Forms

Simulate a new Date object in Deno for testing purposes

Puppeteer: Simulating WebSocket Connections

Encountering a problem with Webpack SASS build where all files compile successfully, only to be followed by a JavaScript

A guide on implementing the useEffect hook with forwardRef in TypeScript

What methods can be used to prompt TypeScript to analyze varied typing scenarios individually instead of combining them?

The function 'sendEmailVerification' is not a property of the type 'Promise<User>'

Creating customized infrastructure deployment utilizing AWS CDK for generic use cases

How can I adjust the column width in OfficeGen?

Retrieving a single item from Firebase database using Angular 5