Check null value in variable in angular component

user_3653474 0
Viewed 48

I have this div

<td><a *ngIf="data?.URL; else noData"  [href]="data?.URL" target="_blank">View
                            File</a>
                            <ng-template #noData>
                                <span> No File</span>
                            </ng-template>

                               
                        </td>

in some cases data.URL is null URL: "null" and else there will be file url but in my component in all case View File is displayed.

another issue is I have url like this https://egdomain/download_.jpg i want to display only the file in the link not the full url like download_.jpg

Any solution to fix this issue

angular typescript
2 Answers
  1. URL: "null" is a string and not a null value. So along with null value, you also need to compare "null" string as well if you want to filter it out.

Something like below:

*ngIf="data?.URL && data.URL !== 'null'; else noData"
  1. To play with the variables in view component in Angular, use {{ ... }} statements. Below is how you can trim the trailing / if present, split the whole string by / and get the last keyword (the file name) and display it:
<a [href]="...">{{data.URL.replace(/\/$/, '').split('/').pop()}}</a>

To optimize this solution, create a pipe to get the file name from URL, and append same above logic to that pipe and return the value.

user_37099220

Understand this at first and then implement the same in your code.

.Ts file:-

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nullVariable = null;

  isNameCheck(): boolean {
    if (typeof this.nullVariable != 'undefined' && this.nullVariable) {
      return false;
    }
    return true;
  }
}

Now to call the function in .HTML file:- In this example, if nullVariable is empty or null, or undefined, It prints the empty message.

nullVariable can be a number or string or array or object.

<div *ngIf="nullVariable">
  <span>stringValue is not empty</span>
</div>

<div *ngIf="!nullVariable">
  <span>nullValue is empty.</span>
</div>
{{isNameCheck()}}
user_160531010
Related