CODEWITHSUNDEEP
javascriptangular
user3082488
user3082488

Reputation: 71

I want a way to rewrite this with less repetition

So I have two conditions here with some changes in the UI. Is there a way to rewrite it in a better way?

<i *ngIf="measures.length > 0">
  <ul *ngFor="let m of measures">
    <io-data-selection-row
      [text]="m.getDisplayName()"
      [id]="m.getId()"
      (deleteIconClicked)="removeSelected($event)"
    ></io-data-selection-row>
  </ul>
</i>
<ul *ngIf="measures.length <= 0">
  <io-data-selection-row
    [strikeThrough]="'strikethrough'"
    [text]="selected"
    [id]="selected"
    (deleteIconClicked)="removeSelected($event)"
  ></io-data-selection-row>
</ul>

Upvotes: 1

Views: 85

Answers (5)

Niraj Patel
Niraj Patel

Reputation: 810

Can you add like this and check if it works?

<i>
  <ul *ngFor="let m of measures">
    <io-data-selection-row
      [strikeThrough]="!m && 'strikethrough'"
      [text]="m ? m.getDisplayName() : selected"
      [id]="m ? m.getId() : selected"
      (deleteIconClicked)="removeSelected($event)"
    ></io-data-selection-row>
  </ul>
</i>

Upvotes: 0

Eliseo
Eliseo

Reputation: 57919

Another aproach is, when you get the measures, make a map (I supose you're getting from a service), or use an if, e.g. some like

this.serviceData.getMeasures.pipe(
    map((res:any[])=>{
       if (!res || res.length<=0)
          return [{text:'selected'}] //<--change to fit in your requeriments
       return res;
    }).subscribe(res=>{
           this.measures=res;
    })

Upvotes: 0

CodeRider
CodeRider

Reputation: 584

You have few ways to achieve this.

  1. Use ngStyle or ngClass for dynamically change the style properties
  2. If you want modifications in the existing code then go for the below.

.

<div *ngIf="measures.length > 0; then thenBlock; else elseBlock"></div>
 <div> 
  <ng-template #thenBlock>
   <ul *ngFor="let m of measures">
    <io-data-selection-row
     [text]="m.getDisplayName()"
     [id]="m.getId()"
      (deleteIconClicked)="removeSelected($event)">
    </io-data-selection-row>
   </ul>
  </ng-template>
 <ng-template #elseBlock>
  <io-data-selection-row
   [strikeThrough]="'strikethrough'"
   [text]="selected"
   [id]="selected"
   (deleteIconClicked)="removeSelected($event)">
  </io-data-selection-row>
 </ng-template>
</div>

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26360

You can use ngIf-else, but I don't think there's a much shorter way:

<i *ngIf="measures.length; else nolength">
    <ul *ngFor="let m of measures">
        <io-data-selection-row [text]="m.getDisplayName()" [id]="m.getId()"
            (deleteIconClicked)="removeSelected($event)"></io-data-selection-row>
    </ul>
</i>

<ng-template #nolength>
    <ul>
        <io-data-selection-row [strikeThrough]="'strikethrough'" [text]="selected" [id]="selected"
            (deleteIconClicked)="removeSelected($event)"></io-data-selection-row>
    </ul>
</ng-template>

Upvotes: 0

mamichels
mamichels

Reputation: 639

Just use *ngIf="measures.length" for !== 0 and *ngIf="!measures.length" for === 0

Upvotes: 1

Related Questions