Check null value in variable in angular component

Question

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

Jignesh M. Khatri · Accepted Answer · 2022-09-05 13:20:04Z

2

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.

edited Sep 5, 2022 at 13:20

answered Sep 5, 2022 at 12:20

Jignesh M. Khatri

1,6561 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

user3653474 Over a year ago

Thanks but i don't want to change the href only want to manipulate name

Jignesh M. Khatri Over a year ago

Which name are you talking about? The link name is View File which is written between <a>...</a>

user3653474 Over a year ago

Yes the View File name <a> File name</a>

Jignesh M. Khatri Over a year ago

So instead of View File, you want to display the download_.jpg or whatever the file name in the data.URL ?

user3653474 Over a year ago

Yes only the filename

|

Ankit · Accepted Answer · 2022-09-05 12:40:50Z

1

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

answered Sep 5, 2022 at 12:40

Ankit

1022 silver badges14 bronze badges

1 Comment

Jignesh M. Khatri Over a year ago

Using component methods directly in view are not recommended. They will slow down the DOM because of continuous method calls. Instead use pipes to perform any operations in view.

Collectives™ on Stack Overflow

Check null value in variable in angular component

2 Answers 2

13 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related