I have been struggling to create a component using ngTemplateOutlet to select an ng-template, but for some reason *ngTemplateOutlet is not working in this case (although [ngTemplateOutlet] is functioning correctly).
Below is the code I am currently using:
demo-frame.component.html:
<div class="frame-wrapper">
<ng-container [ngTemplateOutlet]="(windowWidth < 480)? this.realView : this.shelledView">
<ng-template #realView>
realView work!!
</ng-template>
<ng-template #shelledView>
shelledView work!!
</ng-template>
</ng-container>
</div>
demo-frame.component.ts:
import { Component, OnInit, ViewChild, TemplateRef, HostListener} from '@angular/core';
@Component({
selector: 'app-demo-frame',
templateUrl: './demo-frame.component.html',
styleUrls: ['./demo-frame.component.scss']
})
export class DemoFrameComponent implements OnInit {
public windowWidth : number;
@ViewChild('realView') realView : TemplateRef<any>;
@ViewChild('shelledView') shelledView : TemplateRef<any>;
constructor() { }
getWindowWidth(){
this.windowWidth = window.innerWidth;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.getWindowWidth();
}
ngOnInit() {
this.getWindowWidth();
}
}
As a beginner in Angular, I would appreciate if someone could help me identify where I am going wrong.