Lo que estoy tratando de lograr es mostrar la vista/componente apropiado según el ancho del dispositivo. Adjunté un detector de eventos y creé una declaración if para representar la ng-template adecuada basada en un mobile de bandera de clase booleana, sin embargo, cuando arrastro mi navegador, la plantilla no cambia, pero el evento de cambio de tamaño se activa ...

html

 <div class="row dashboard-list-view"> <div class="col-12" *ngIf="mobile; then mobileListBlock else desktopListBlock"></div> <ng-template #desktopListBlock> <app-dashboard-list-desktop [data]="data" [filters]="filters"></app-dashboard-list-desktop> </ng-template> <ng-template #mobileListBlock> <app-dashboard-list-mobile [data]="data" [filters]="filters"></app-dashboard-list-mobile> </ng-template> </div>

t

 import { Component, Input, OnInit } from '@angular/core'; import { ResizeService } from '../../services/resize.service'; @Component({ selector: 'app-dashboard-list', templateUrl: './dashboard-list.component.html', styleUrls: ['./dashboard-list.component.scss'] }) export class DashboardListComponent implements OnInit { @Input() data: any = []; @Input() filters: any = []; mobile: boolean = false; constructor(private resizeService: ResizeService){} objectKeys = Object.keys; ngOnInit() { this.resizeService.onResize$.subscribe(this.onWindowResize); this.onWindowResize(); } onWindowResize() { console.log("Resize!") if (window.innerWidth < 992) { this.mobile = true; } else { this.mobile = false; } } }

He buscado preguntas similares, pero no puedo entender qué estoy haciendo mal aquí, ¡gracias de antemano!

Actualizar

Sin embargo, cuando inicializo la aplicación en un dispositivo móvil, muestra la vista móvil. Lo mismo para el escritorio también. Es solo que el evento no tiene ningún efecto después del renderizado inicial.