In my code, I have a method that is made public and accessible through the window object. This method interacts with a Component and updates a variable in the template. However, even after changing the value of the variable, the *ngIf() directive does not trigger.
Here is a snippet from app.component:
constructor(private _public: PublicService,) {
window.angular = {methods: this._public};
}
This is the PublicService class:
export class PublicService {
constructor(
private _viewManager: ViewManagerComponent,
) {}
CallMe(){
this._viewManager.renderView('page1')
}
}
And here is the ViewManagerComponent:
@Component({
selector: 'view-manager',
template: `<page *ngIf="view == 'page1'"></page>`
})
export class ViewManagerComponent {
view = "page";
renderView = function(type){
console.log(type)
this.view = type;
console.log(this.view)
};
}
The intended functionality is that initially, the page renders blank. When calling angular.methods.CallMe(), it should update the view variable to 'page1' and display the corresponding HTML content. Despite successfully calling the renderView function, the view does not change as expected.
----Update - Still facing issues -------
export class ViewManagerComponent {
constructor(private zone:NgZone,private cdRef:ChangeDetectorRef) {
}
view = "page";
@Output() renderView(type){
console.log(this.view);
this.zone.run(() => {
console.log(this.view);
this.view = type;
console.log(this.view);
});
console.log(this.view);
//cdRef errors:
//view-manager.component.ts:36 Uncaught TypeError: this.cdRef.detectChanges is not a function(…)
this.cdRef.detectChanges();
};
}