Use ngIf else in angular template

In Angular template we can use if, if-then, if-else, if-then-else structures:

To acheive the required behavior, we have to create a template reference variable for the target element which needs to be shown in the given condition.

Lets say our component has boolean variable isValid, and we will check this variable in our example to display different UI elements based on truthy or falsy values.

Using simple if condition

For simple if condition, we can write:

<div *ngIf="isValid">
  this content will render when the isValid has truthy value.
</div>

Using if-then condition

We can also write the above code with if-then structure, which behaves exactly the same way as above, but have different syntax. We can write:

<div *ngIf="isValid;then thenBlock">
   this will never display
</div>
<ng-template #thenBlock>
   this content will render when the isValid has truthy value.
</ng-template>

Here we have defined a template reference variable (#thenBlock) on ng-template tag, and used it in the if-then structure to display it when this condition is true.

The above exmaple can also be written with ngIf and ngIfThen:

<ng-template [ngIf]="isValid" [ngIfThen]="thenBlock">
   this will never display
</ng-template>
<ng-template #thenBlock>
   this content will render when the isValid has truthy value.
</ng-template>

Using if-else condition

For case if with else, we can use ngIf and ngIfElse.

<ng-template [ngIf]="isValid" [ngIfElse]="elseBlock">
   this content will render when the isValid has truthy value.
</ng-template>
<ng-template #elseBlock>
   this content will render when the if condition is not truthy.
</ng-template>

Using if-then-else condition

We can also combine ngIf, ngIfThen, and ngIfElse.

<ng-template [ngIf]="isValid" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
   this will never display
</ng-template>
<ng-template #thenBlock>
   this content will render when the isValid has truthy value.
</ng-template>
<ng-template #elseBlock>
   this content will render when the if condition is not truthy.
</ng-template>

Convert seconds to hh-mm-ss with JavaScript/TypeScript

I received this requirement while working on Angular application and developing the two-factor authentication screen with SMS OTP. This screen has the timer countdown to show remaining time in seconds (in mm:ss format) to enable the button to resend OTP.

I found two different functions to format the seconds in hh:mm:ss format.

In first method, you can manually perform the arithmetic operations to extract hours, minutes and seconds from given value.

Convert_Seconds_To_HHMMSS(seconds) {

      let hour = Math.floor(seconds / 3600);
      let minute = Math.floor((seconds % 3600) / 60);
      let second = seconds % 60;

      if(hour.toString().length === 1) {
            hour = `0${hour}`;
      }
      if(minute.toString().length === 1) {
            minute = `0${minute}`;
      }
      if(second.toString().length === 1) {
            second = `0${second}`;
      };

      let timeFormatted = `${hour}-${minute}-${second}`;

      return timeFormatted;
}

In second method, you can use one-liner solution using Date.toISOString() function.

new Date(seconds * 1000).toISOString().substring(11, 16)

If the seconds value is less than 3600 (less than an hour) or you don't want t show the hours in formatted string, and only need to show minutes and seconds (mm:ss), then simply change the arguments for substring() function to extract the required string part.

new Date(seconds * 1000).toISOString().substring(14, 19)