set change detection on push

src/app/modules/presentation/monitor/monitor.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {debounceTime, distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {SongService} from '../../songs/services/song.service';
@@ -38,7 +38,8 @@ export class MonitorComponent implements OnInit {
     private songService: SongService,
     private textRenderingService: TextRenderingService,
     private globalSettingsService: GlobalSettingsService,
-    private configService: ConfigService
+    private configService: ConfigService,
+    private cRef: ChangeDetectorRef
   ) {
     this.config$ = configService.get$();
   }
@@ -66,7 +67,10 @@ export class MonitorComponent implements OnInit {
           this.presentationDynamicText = _.presentationDynamicText;
           this.zoom = _.presentationZoom ?? 30;
           if (this.songId !== _.presentationSongId) this.songId = 'empty';
-          setTimeout(() => (this.songId = _.presentationSongId), 600);
+          setTimeout(() => {
+            this.songId = _.presentationSongId;
+            this.cRef.markForCheck();
+          }, 600);
         }),
         switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
         filter(_ => !!_),
@@ -74,6 +78,7 @@ export class MonitorComponent implements OnInit {
       )
       .subscribe(_ => {
         this.song = _;
+        this.cRef.markForCheck();
       });
   }
 }

src/app/modules/presentation/presentation.module.ts

@@ -19,6 +19,7 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
 import {MatInputModule} from '@angular/material/input';
+import {UserNameModule} from '../../services/user/user-name/user-name.module';
 
 @NgModule({
   declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
@@ -39,6 +40,7 @@ import {MatInputModule} from '@angular/material/input';
     AddSongModule,
     ReactiveFormsModule,
     MatInputModule,
+    UserNameModule,
   ],
 })
 export class PresentationModule {}

src/app/modules/presentation/select/select.component.html

@@ -6,6 +6,8 @@
 
     <div *ngIf="shows.length>0" class="list">
       <button mat-stroked-button *ngFor="let show of shows" (click)="selectShow(show)">
+        <app-user-name [userId]="show.owner"></app-user-name>
+        ,
         {{ show.showType | showType }},
         {{ show.date.toDate() | date: "dd.MM.yyyy" }}
       </button>

src/app/modules/presentation/select/select.component.less

@@ -1,5 +1,5 @@
 .list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 10px;
 }