Check null value in variable in angular component

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

>Solution :

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"

2. 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>