Optimize angular code for better scalability and good architecture

Question

I have a below html code. ( I do not intend to use *ngFor )

   <div *ngIf = 'showTemplate1'>Template 1</div>
   <div *ngIf = 'showTemplate2'>Template 2</div>
   <div *ngIf = 'showTemplate3'>Template 3</div>
   <div *ngIf = 'showTemplate4'>Template 4</div>
   <div *ngIf = 'showTemplate5'>Template 5</div>
   <div *ngIf = 'showTemplate6'>Template 6</div>
   <div *ngIf = 'showTemplate7'>Template 7</div>
   <div *ngIf = 'showTemplate8'>Template 8</div>

In my TS file, I have as below

displayTemplates(){
   if( condition1 ){
    this.showTemplate1 = true;
    this.showTemplate2 = true;
    this.showTemplate3 = true;
    this.showTemplate4 = true;
    this.showTemplate5 = true;
    this.showTemplate6 = true;
    this.showTemplate7 = false;
    this.showTemplate8 = false;
   }
   else if( condition2 ){
    this.showTemplate1 = false;
    this.showTemplate2 = true;
    this.showTemplate3 = true;
    this.showTemplate4 = true;
    this.showTemplate5 = true;
    this.showTemplate6 = true;
    this.showTemplate7 = false;
    this.showTemplate8 = true;
   }
  else if( condition3 ){
    this.showTemplate1 = true;
    this.showTemplate2 = true;
    this.showTemplate3 = true;
    this.showTemplate4 = true;
    this.showTemplate5 = true;
    this.showTemplate6 = true;
    this.showTemplate7 = true;
    this.showTemplate8 = false;
   }
 }

As you see in the code, it looks like a bad code. Is there any other approach to make this much cleaner and SCALABLE.

Couldn't you use an array of booleans instead?

jonrsharpe
– jonrsharpe

2018-10-29 14:36:24 +00:00
Commented Oct 29, 2018 at 14:36 — jonrsharpe
– jonrsharpe, Commented Oct 29, 2018 at 14:36

Sunil · Accepted Answer · 2018-10-29 14:47:07Z

1

Here is some improvement you can make in your code

resetToTrue(){
    this.showTemplate1 = true;
    this.showTemplate2 = true;
    this.showTemplate3 = true;
    this.showTemplate4 = true;
    this.showTemplate5 = true;
    this.showTemplate6 = true;
    this.showTemplate7 = true;
    this.showTemplate8 = true;
}

displayTemplates(){
   if(condition1 ){
    this.resetToTrue();
    this.showTemplate7 = false;
    this.showTemplate8 = false;
   }
   else if( condition2 ){
    this.resetToTrue();
    this.showTemplate1 = false;
    this.showTemplate7 = false;
   }
  else if( condition3 ){
    this.resetToTrue();
    this.showTemplate8 = false;
   }
 }

User this.resetToTrue() if most of the fields are true else you can create a method this.resetToFalse() which sets all values to false.

answered Oct 29, 2018 at 14:47

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kasuni Kuruppuarachchi · Accepted Answer · 2024-06-16 06:47:24Z

0

displayTemplates(){
    this.resetToTrue();
    switch (true) {
        case condition1:
            this.showTemplate7 = false;
            this.showTemplate8 = false;
            break;
        case condition2:
            this.showTemplate1 = false;
            this.showTemplate7 = false;
            break;
        case condition3:
            this.showTemplate8 = false;
            break;      
    }
}

answered Jun 16, 2024 at 6:47

Kasuni Kuruppuarachchi

13 bronze badges

Collectives™ on Stack Overflow

Optimize angular code for better scalability and good architecture

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related