change ngIf

Author: vicmans

projects/demo/src/app/app.component.html

@@ -11,12 +11,15 @@ <h2>Custom style</h2>
 <ngx-input-counter class="custom" [(ngModel)]="custom" [max]="5" [min]="0">
   <ng-container ngProjectAs="[minus]">
     <ng-template let-step="step" let-min="min" let-value="value">
-      <svg *ngIf="custom !== min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    @if(custom !== min + step) {
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
       </svg>
-      <svg *ngIf="custom == min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    } @else {
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
       </svg>
+    }
     </ng-template>
   </ng-container>
 </ngx-input-counter>
@@ -26,24 +29,28 @@ <h2>Custom style</h2>
 <h2>Custom style 2</h2>
 
 <!-- <small>Using SVG icons</small> -->
- <ng-template #plusTemplateIcon>
+<ng-template #plusTemplateIcon>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+</ng-template>
+<ng-template #minusTemplateIcon let-step="step" let-min="min" let-value="value">
+  @if(custom !== min + step) {
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-    </svg>
-  </ng-template>
-  <ng-template #minusTemplateIcon let-step="step" let-min="min" let-value="value">
-    <svg *ngIf="custom !== min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
     </svg>
-    <svg *ngIf="custom == min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#EF2F35">
+  } @else {
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#EF2F35">
       <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
     </svg>
-  </ng-template>
+  }
+</ng-template>
 
 <div style="display: flex;">
-
-<ngx-input-counter class="custom-plus" style="margin: auto;" [(ngModel)]="custom" [max]="5" [min]="0" *ngIf="custom>0">
+@if (custom > 0) {
+<ngx-input-counter class="custom-plus" style="margin: auto;" [(ngModel)]="custom" [max]="5" [min]="0">
 </ngx-input-counter>
+}
 </div>
 
 <h2>Test custom component</h2>