Как обновить выпадающий список без перезагрузки страницы в Angular6?

Question

Я использую ngx-twitter-timeline , чтобы получать последние обновления твитов.

При первой загрузке страницы я могу получать последние твиты после нажатия кнопки твита. Если я нажму еще раз, твиты не будут отображаться, но место, которое они займут, будет видно.

Если я перенаправлю на страницу или перезагрузлю страницу, будут отображаться твиты.

Html

<mat-toolbar class="olc-menu" fxLayoutAlign="center center">
              <button mat-fab color="primary"  [matMenuTriggerFor]="menu"  (click)="openMegaMenu()">Tweets</button>
  <mat-menu #menu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
      <div fxLayout="row wrap">
            <div fxFlex="25" fxLayout="column" class="p-1"> 
                </div>
          <div fxFlex="50" fxLayout="column" class="p-1"> 
              <a mat-menu-item routerLink="/"><b>Twitter</b></a>
              <mat-divider></mat-divider> 
              <ngx-twitter-timeline 
              [data]="{sourceType: 'url', url: 'https://twitter.com/RajuOakLiquor' }"
              [opts]="{tweetLimit: 10}"
              ></ngx-twitter-timeline>
          </div>
          <div fxFlex="25" fxLayout="column" class="p-1"> 
            </div>
      </div>
  </mat-menu>
</mat-toolbar>
<!-- <div fxLayout="row wrap">
    <div fxFlex="100" fxLayout="column" class="p-1">
        <mat-accordion>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Twitter
                    </mat-panel-title>
                    <mat-panel-description>
                        Trending Tweets {{panelOpenState ? 'open' : 'closed'}}
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <!-- <div fxLayout="row wrap">
                    <div fxFlex="100" fxLayout="column" class="p-1"> -->
                        <!-- <a mat-menu-item routerLink="/"><b>Twitter</b></a>
                        <mat-divider></mat-divider>
                        <ngx-twitter-timeline [data]="{sourceType: 'url', url: 'https://twitter.com/RajuOakLiquor' }"
                            [opts]="{tweetLimit: 10}"></ngx-twitter-timeline> -->
                    <!-- </div>
                </div> -->
            <!-- </mat-expansion-panel>
        </mat-accordion>
    </div>
</div> -->

Component.ts

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

@Component({
  selector: 'app-socialmedia',
  templateUrl: './socialmedia.component.html',
  styleUrls: ['./socialmedia.component.scss']
})
export class SocialmediaComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  openMegaMenu(){
    let pane = document.getElementsByClassName('cdk-overlay-pane');
    [].forEach.call(pane, function (el) {
        if(el.children.length > 0) {
          if(el.children[0].classList.contains('mega-menu')){
            el.classList.add('mega-menu-pane');
          }
        }
    });
  }

}

Кнопка моего твита:

При первой загрузке страницы:

Когда я нажимаю кнопку во второй раз: