Variable value in the middle of an html LINK

Question

The idea is to pass a phone number on the link to direct call on Whatsapp:

 <a href="https://api.whatsapp.com/send?phone=+55'NUMERO'&text=blablabla">

Buttons and the like are already made, I just wonder how I put the variable that I already have where is 'NUMERO' up there.

I tried it this way

<a href="https://api.whatsapp.com/send?phone=+55NUMERO&text=blablabla" >
    <button (click)= "troca(var)"> 
    LINK
    </button>
</a>

and no . ts (design being done with Angular) thus:

troca(n){
    const link = document.querySelector('a');
    link.href = link.href.replace('NUMERO', n);

}

Answer 1

There are several ways one of them is to use the function replace:

const link = document.querySelector('a');

link.href = link.href.replace('NUMERO', '123451234');

console.log(link);

<a href="https://api.whatsapp.com/send?phone=+55NUMERO&text=blablabla">

If you are using Angular ai changes completely, an example:

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

@Component({
    selector: 'app-example',
    template: `
        <a href="https://api.whatsapp.com/send?phone=+55{{ numero }}&text=blablabla" >
            <button (click)= "troca('123451234')"> LINK</button>
        </a>
    `,
    styles: []
})
export class ExampleComponent {

    numero: string = '';

    constructor() { }

    troar(novoNumero): void {
        this.numero = novoNumero;
    }

}