Different or improved strategy for conditional rendering in Angular

Question

Different or improved strategy for conditional rendering in Angular

Hey there! I've got a few *NgIf conditions in my template that determine which components (different types of forms) are displayed/rendered. For example, in one of my functions (shown below)

private _onClick(cell:any){
        this._enableView = false;
        this._enableCreate = true;
        this._enableDelete = false;
        this._enableEdit = false;
    }

I use it to enable the create form in the template and hide other forms if they're present. However, I'm starting to feel like this approach is a bit off or repetitive. Is there a better suggestion or alternative method I could consider instead?

javascript angular typescript

Answer 1

Answer №1

If Leguest's suggestion of having a single state is feasible, my recommendation would be to utilize the ngswitch directive in this manner:

// Example of ngSwitch
<div [ngSwitch]="state">
    <div *ngSwitchCase="'create'"> ... </div>
    <div *ngSwitchCase="'view'">  ... </div>
    <div *ngSwitchCase="'edit'"> ... </div>
    <div *ngSwitchCase="'delete'"> ... </div>
    <div *ngSwitchDefault> ... </div>
</div>

Alternatively, if you are working with Angular 4.x, you can make use of ngIf else:

// Syntax for ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<template #elseBlock>Falsy condition</template>

Answer 2

If Leguest's suggestion of having a single state is feasible, my recommendation would be to utilize the ngswitch directive in this manner:

// Example of ngSwitch
<div [ngSwitch]="state">
    <div *ngSwitchCase="'create'"> ... </div>
    <div *ngSwitchCase="'view'">  ... </div>
    <div *ngSwitchCase="'edit'"> ... </div>
    <div *ngSwitchCase="'delete'"> ... </div>
    <div *ngSwitchDefault> ... </div>
</div>

Alternatively, if you are working with Angular 4.x, you can make use of ngIf else:

// Syntax for ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<template #elseBlock>Falsy condition</template>

Answer 3

Answer №2

It's hard to say if it's an improvement or not, but one approach is to have a single state property like this.state, which holds a string value:

JavaScript

 private _onClick(cell:any){
    this.state = 'create'
 }

HTML

<div *ngIf="state == 'create'">
    // create form 
</div>
<div *ngIf="state == 'view'">
   // view form
</div>
<div *ngIf="state == 'edit'">
  // edit form
</div>
<div *ngIf="state == 'delete'">
 // delete form
</div>

This allows you to move some of your code into templates, potentially streamlining your JavaScript codebase.

Answer 4

It's hard to say if it's an improvement or not, but one approach is to have a single state property like this.state, which holds a string value:

JavaScript

 private _onClick(cell:any){
    this.state = 'create'
 }

HTML

<div *ngIf="state == 'create'">
    // create form 
</div>
<div *ngIf="state == 'view'">
   // view form
</div>
<div *ngIf="state == 'edit'">
  // edit form
</div>
<div *ngIf="state == 'delete'">
 // delete form
</div>

This allows you to move some of your code into templates, potentially streamlining your JavaScript codebase.

Different or improved strategy for conditional rendering in Angular

Answer №1

Answer №2

Similar questions

Managing multiple changes in input values within an object

Ensure that the HTML input element only accepts positive values, including decimal numbers

Multiple change events triggered in AJAX interactions

Encountering an unhandled promise rejection issue with Knex's batchInsert function when attempting to insert arrays larger than 3 elements

AngularJS Kendo Date Picker: A Simplified Way to Select

The error message "props.text is undefined in React Native" indicates that there is an issue with accessing the property text within

Replace the hyphen with a comma using JavaScript

How can I dynamically adjust the stroke length of an SVG circle using code?

What is the recommended service to call in an Angular unit test?

Changing a JavaScript command into a text representation

When trying to click a button in an ion-footer, the (click) function may not execute initially

Sending messages to all sockets in socket.io except the one who sent it

Iterate through the form fields and save the information into an object

Tips on customizing label colors on a Donutchart using Google API

Unexpected outcomes arise when parsing headers from a file-based stream

issue with the emit() and on() functions

Leveraging $last in Angular for obtaining the final visible element with ng-show

Determine the number of Fridays that fall between two dates using JavaScript or jQuery

What is the best way to retrieve the JSON data from a POST request made through AJAX to a PHP file and save it in an array variable?

Angular JS presents an exciting feature called Multiple Filters, which allows