How to stop passing query parameters if the value is null. Using 'ng-attr-href'

Question

I am new to Angular. In my program, I am passing some values inside a <a href> tag.

The current code is this.

<a (click)="navigateFunction()" href="{{sceURL}}/?orderId={{orderId}}">

component.ts :

navigateFunction(){
    this.orderId = this.orderIdFormGroup.value.orderId;
    this.sceURL = "URL";
    }

If the value is null, it reloads with the key like this.

 URL/rtap-menu/gadget-rtap-sce?orderId=

How to change it into pass only URL is the value is Null
I hope it can be done using ng-attr-href

Answer 1

try doing

get gotoUrl() {
   return this.orderId 
        ? `${sceURL}/?orderId=${orderId}`
        : this.sceURL
}

and in html like

<a (click)="navigateFunction()" [href]="gotoUrl">