Angular 4 offers a variety of template options to choose from

Question

Angular 4 offers a variety of template options to choose from

Imagine these divs within a component:

<div ngIf="condition1">   
<button (click)="set_condition1_false_and_2_true()">show-template-2</button> 
</div>

<div ngIf="condition2>   
<button (click)="set_condition2_false_and_3_true()">show-template-3</a> 
</div>

<div ngIf="condition3>   
<a>Last Template</a>
</div>

If the TypeScript is correctly handling the booleans, how can I create this view?

(note) I managed to make it work with two divs:

<div *ngIf="condition1; else secondTemplate>
  <button (click)="make_condition1_false_and_2_true()">showSecondTemplate
</button>
</div>

<ng-template #secondTemplate>
  <a>Second Template Works</a>
</ng-templante>

However, I need three templates in the same component

angular typescript

Answer 1

Answer №1

If you're looking for a straightforward approach, one way to handle this is by ensuring that the other conditions are false in your *ngIf statements.

Here's an example with just the if statements:

<div *ngIf="!condition2 && !condition3 && condition1">   

<div *ngIf="!condition1 && !condition3 && condition2">   

<div *ngIf="!condition1 && !condition2 && condition3>

Another option is to utilize NgSwitch. This method works well when all conditions are based on the same variable, but if they're not, you can create a helper function to handle it.

<div [ngSwitch]="getState()">
  <div *ngSwichCase="1">   
  <div *ngSwichCase="2">   
  <div *ngSwichCase="3"> 
</div>

Within your TypeScript code, define the getState function using if/then/else logic like so:

getState() {
  if (condition1) {
    return 1;
  } else if (condition2) {
    return 2;
  } else {
    return 3;
  }
}

In your actual implementation, consider using a more descriptive function name and returning an enumeration value instead of arbitrary numbers.

Answer 2

If you're looking for a straightforward approach, one way to handle this is by ensuring that the other conditions are false in your *ngIf statements.

Here's an example with just the if statements:

<div *ngIf="!condition2 && !condition3 && condition1">   

<div *ngIf="!condition1 && !condition3 && condition2">   

<div *ngIf="!condition1 && !condition2 && condition3>

Another option is to utilize NgSwitch. This method works well when all conditions are based on the same variable, but if they're not, you can create a helper function to handle it.

<div [ngSwitch]="getState()">
  <div *ngSwichCase="1">   
  <div *ngSwichCase="2">   
  <div *ngSwichCase="3"> 
</div>

Within your TypeScript code, define the getState function using if/then/else logic like so:

getState() {
  if (condition1) {
    return 1;
  } else if (condition2) {
    return 2;
  } else {
    return 3;
  }
}

In your actual implementation, consider using a more descriptive function name and returning an enumeration value instead of arbitrary numbers.

Angular 4 offers a variety of template options to choose from

Answer №1

Similar questions

Select a randomly generated number from an array, which dynamically updates every time the browser is refreshed

React - All subsequent variable declarations must be of the same type

Tips for mocking Dependent Modules in Jasmine when dealing with a plethora of dependencies in Angular 9

Issue with the functionality of Angular reactive custom validator inoperable

Customize the element of the root node of a MUI component using the styled()

Guide on validating a dropdown using template-driven forms in Angular 7

Having trouble accessing an injector service within the promise of a dynamically loaded JavaScript function that has been assigned to a global variable

Prevent Angular 4 Component Reloading

What steps do I need to take in order to develop a custom component for FormControls?

Ways to initiate update notification when altering an array object?

Angular error: Attempting to access the value property of an undefined object

Tips for transferring photos with Angular 5 and Node.js

Invalid Type Property - Request and Response Express Types

What could be causing my matDialog to display incorrectly in Angular version 15?

Establishing a response header in conjunction with a specified string

Unable to post links on Facebook when using Angular 7

What is the process for clearing cache in inversifyJS?

Angular 6 and Typescript: How to Map Objects in Arrays within Arrays

What is the best way to connect a text box to a nested object in the state of a React component?

Tips for deactivating the matMenuTrigger when the mat menu does not display any menu items