Я использую угловой материал
как только страница перезагрузится, на ней будут показаны 10 последних твитов во второй раз, если я нажму ту же кнопку, контент не отобразился, но на нем было показано 10 твитов, выделенных для этого места. когда я перезагружаю эту страницу, она показывает 10 последних твитов.
здесь я упомянул мой HTML и изображение моего выпадающего списка
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>
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');
}
}
});
}
}
изображение (после перезагрузки страницы отображается содержимое)
image2 (если я нажму кнопку второй раз)
В этом втором изображении содержание не отображалось, но выделено место для 10 твитов.