Angular 15 Framework: Twitter Widget Not Updating in Angular Component

Question

I am currently working on an Angular project that involves embedding Twitter widgets into a component. The widget is supposed to display a random tweet from a list of tweet URLs every 45 seconds. However, I am facing an issue where the Twitter widget is not updating as expected. The widget correctly displays a tweet when the component initially loads, but it does not update when a new tweet URL is selected.

Here's the current code for my component:

ngOnInit() {
     this.randomizeTweet();

     const reloadInterval = 5;
     this.reloadIntervalId = setInterval(() => { this.randomizeTweet() }, reloadInterval * 1000); }



ngOnDestroy() {
    if(this.reloadIntervalId) {
    clearInterval(this.reloadIntervalId);
 }}


async randomizeTweet() {
    let randomIndex = Math.floor(Math.random() * this.tweetList.length);
    console.log("It Works");
    this.selectedTweet = this.tweetList[randomIndex];

    this.changeDetector.detectChanges();

    if ((window as any).twttr && (window as any).twttr.widgets) {
      (window as any).twttr.widgets.load();
    }}

Here's the relevant part of my HTML FILE:

 <div class="fade-in">
     <blockquote class="twitter-tweet" data-lang="en" data-theme="dark"> <a [href]="selectedTweet"></a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </div>