Hi I have several *NgIf conditions in my template. Based on the NgIf I display/render my ponents(different type of form) in the template. Example in one of my function (below)

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

Which is to enable my create form in the template and hide other forms if its there. But doing so feel like bit wrong or redundant to me. Is there any better approach or suggestion instead of this approach?

Hi I have several *NgIf conditions in my template. Based on the NgIf I display/render my ponents(different type of form) in the template. Example in one of my function (below)

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

Which is to enable my create form in the template and hide other forms if its there. But doing so feel like bit wrong or redundant to me. Is there any better approach or suggestion instead of this approach?

• javascript
• angular
• typescript

• 1 What does you view (with *ngIfs look like)? Your isolated code snipped doesn't provide much information about its purpose. – Günter Zöchbauer Commented Apr 20, 2017 at 6:15
• Can you provide the template? From what I understand you have different forms which really make your code really long. Based from the code you provided, it seems that what you really want is toggling the buttons for this actions and not the whole form – brijmcq Commented Apr 20, 2017 at 6:28

2 Answers 2

If it is possible to have a single state as suggested by Leguest I would remend ngswitch used like this:

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

Otherwise if you are using Angular 4.x you can take advantage of ngIf else:

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

I am not sure is it better or worse, but you can have one state property e.g. this.state, that contains string:

JS

 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>

So you replace part of your code into templates, I hope it reduce your js codebase