How can we update the canonical tags for sub URLs using angular?

Question

I put the following link in the index.html => It's successfully used by SEO tools:

<link rel="canonical" href="https://example.com">

For sub-URLs I have the following code and function called in the constructor. But, it's not picked up by SEO tools:

constructor() {
    this.setCanonicalURL();
}

canonicalUrl: string = '';
getCanonicalUrl(): string {
    let currentUrl = this.route.url;
    return 'https://example.com' + currentUrl;
}

setCanonicalURL(): void {
    this.canonicalUrl = this.getCanonicalUrl();
    this.manageCanonicalLink(this.canonicalUrl)
}

manageCanonicalLink(url: string) {
    const existingCanonicalLink = document.querySelector('link[rel="canonical"]');
    if (existingCanonicalLink) {
      existingCanonicalLink.setAttribute('href', url);
    } else {
      const canonicalLink = document.createElement('link');
      canonicalLink.rel = 'canonical';
      canonicalLink.href = url;
      document.head.appendChild(canonicalLink);
    }
} 

When I inspect the element, it's updated successfully. But when I checked in the SEO tool it's not taking. like, it's updated the https://example.com not updating https://example.com/page

Can anyone please suggest what was I missing here?