Check null value in variable in angular component-CodePudding

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

CodePudding user response：

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"

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.

CodePudding user response：

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()}}