How can I combine my two ngIf conditions into an ngIf else statement?

Having trouble incorporating an *ngIf else with two large <div> elements, as the content seems overwhelming to organize properly while following the documentation.

Initially believed that using the same styling for two open text boxes, with one hidden and the other visible, would keep them in the same position, but that turned out not to be the case.

Below are the <div> structures of the two elements:

          <!--open text box if language control is true-->
    <div class="col-sm-12 col-md-4" [style.visibility]="showLanguageControl === true ? 'visible' : 'hidden'">
        <label class="col-sm-3 col-md-5" for="providerRoute">Linked Language Letter</label>
        <div class="col-sm-5 col-md-7 padding-adj">
            <input type="text" id="linkedLetter" name="linkedLetter" #linkedLetter formControlName="linkedLetter" [ngClass]="['form-control','input-xs']" />
        </div>
    </div>

          <!--open text box if exception group is true-->
   <div class="col-sm-12 col-md-4" [style.visibility]="showFaxNumberInput === true ? 'visible' : 'hidden'">
        <label class="col-sm-3 col-md-5" for="providerRoute">Fax Number</label>
        <div class="col-sm-5 col-md-7 padding-adj">
           <input type="text" id="faxInput" name="faxInput" #faxInput formControlName="faxInput" [ngClass]="['form-control','input-xs']" />
        </div>
    </div>
angulartypescriptbootstrap-4angular-ng-if

Answer №1

If you want to convert *ngIf to if-else, there are a couple of ways to do it. One option is to use *ngIf twice with a negated condition (!something) for the else case. Alternatively, you can implement the following method:

<div *ngIf="condition else showThis">
    True
</div>
<ng-template #showThis>
    False
</ng-template>
  • condition represents a value that evaluates to a boolean;
  • showThis is a local reference to the template.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find out if all attributes of the object are identical

I am trying to create the boolean variable hasMultipleCoverageLines in order to determine whether there are multiple unique values for coverageLineName within the coverageLines items. Is there a more efficient way to write this logic without explicitly c ...

javascripttypescript

Error: Issue with accessing the 'get' property of an undefined value (Resolved issue with incompatible imports not functioning)

Encountering an issue while attempting to execute the karma TS spec file. Despite all modules and imports functioning properly without conflicts, the error persists. I've tried incorporating component.ngOninit() into beforeEach() and it(), but to no a ...

angulartypescriptunit-testingjasminekarma-jasmine

Steps to deactivating a styled button using React's styled-components:

I've created a very basic styled-components button as follows: import styled from 'styled-components'; const StyledButton = styled.button``; export const Button = () => { return <StyledButton>Default label</StyledButton> ...

javascriptreactjstypescriptstyled-components

Is there a TypeScript rule called "no-function-constructor-with-string-args" that needs an example?

The description provided at this link is concise: Avoid using the Function constructor with a string argument to define the function body This might also apply to the rule missing-optional-annotation: A parameter that comes after one or more optiona ...

typescriptruletslint

What could be causing the Angular input [value] to execute the function() repeatedly?

While working on a simple code snippet to display input values from an array in a Typescript HTML template, I encountered an issue where the data wasn't loading quickly enough, resulting in errors until it was fully loaded. To solve this problem, I ad ...

angular

Menu with option to delete next to each selection item

My task is to create a drop-down menu with a delete 'X' option next to each item. This functionality should work even when the drop-down is dynamically populated, without resorting to using a list as an alternative. UPDATE: The icons next to eac ...

htmlcssbootstrap-4

Ensure the initial word (or potentially all words) of a statement is in uppercase in Angular 2+

Struggling with capitalizing words in an Angular 2 template (referred to as view) led to an error in the console and the application failing to load, displaying a blank page: Error: Uncaught (in promise): Error: Template parse errors: The pipe 'c ...

javascripttypescriptecmascript-6angular2-templateangular2-pipe

Obtain the parameters of a function within another function that includes a dynamic generic

I am attempting to extract a specific parameter from the second parameter of a function, which is an object. From this object, I want to access the "onSuccess" function (which is optional but needed when requested), and then retrieve the first dynamic para ...

typescript

The attribute 'size' is not recognized within the data type 'string[]' (error code ts2339)

When using my Windows machine with VSCode, React/NextJS, and Typescript, a cat unexpectedly hopped onto my laptop. Once the cat left, I encountered a strange issue with my Typescript code which was throwing errors related to array methods. Below is the co ...

arraystypescriptmethodsnext.jsreact-typescript

angular typescript does not support receiving a value in foreach loop

It seems that I'm facing an issue with retrieving the element value inside a typescript foreach loop. constructor(db: AngularFireDatabase) { } this.fbUserData = this.db.list('users/'+this.userid).valueChanges() this.fbUserData.forEa ...

angulartypescript

Tips on preventing the initial undefined subscription in JavaScript when using RxJS

I am having trouble subscribing to an object that I receive from the server. The code initially returns nothing. Here is the subscription code: ngOnInit() { this.dataService.getEvents() .subscribe( (events) => { this.events = events; ...

javascriptangularrxjs

Issue with loading React Router custom props array but custom string works fine

I am facing an issue with my ReactTS-App where I pass a prop via Router-Dom-Props to another component. The problem arises when I try to use meal.food along with meal.name, or just meal.food alone - it doesn't work as expected. Uncaught TypeError: mea ...

reactjstypescriptreact-router-dom

Communicating between different components in Angular 11 using a service to share data

In my Angular 11 project, componentB has multiple methods that need to be called from componentA. Although I am aware that transferring these methods to a service would be the proper solution, it requires extensive effort which I want to avoid for now. In ...

angularangular11

What could be causing the global npm package to not be utilized for module dependencies?

My typescript and ts-node are already installed globally. In my package.json file, I have the necessary configurations to run tests with npm test. Everything works fine since ts-node and typescript are installed as local modules. { "name": "two_sum", ...

node.jstypescriptnpmnpm-installnpm-scripts

I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this? https://i.sstatic.net/kioAZ.png Here's my HTML code: <mat-form-field appearance= ...

javascripthtmlcssangulartypescript

What causes TypeScript's ReadonlyArrays to become mutable once they are transpiled to JavaScript?

Currently, I am in the process of learning Typescript by referring to the resources provided in the official documentation. Specifically, while going through the Interfaces section, I came across the following statement: TypeScript includes a special t ...

javascripttypescript

Ways to expose a declared module in Enzyme's shallow rendering?

I've been grappling with how to ensure that my custom declared module is detected when I shallow render a component using enzyme in Jest unit tests. The issue revolves around a specific module declaration named _aphrodite, which looks like this: // i ...

reactjstypescriptjestjsenzyme

Issue: AuthInterceptor Provider Not Found

I've been attempting to set up an http interceptor with the new HttpClient in Angular 4.3, but I'm continuously encountering this error message: ERROR Error: Uncaught (in promise): Error: No provider for AuthInterceptor! In my app.module.ts f ...

angular

Using a structural directive in Angular 2 that accepts a String as an input

I am attempting to develop a custom structural directive using the example provided here When trying to pass a string as an input with a slight modification, I encountered an issue where the input value was returning 'undefined' when calling th ...

javascriptangularangular2-directives

Discover the data type without using the extends keyword within an interface in Typescript

I'm struggling with making my code declarative enough. I want to infer a type inside an interface scope and then use that same type as an argument for a method within the interface. Here is a simple example: interface Prop { x: infer U, // ^^ ...

typescriptgenericstype-inference