Access to variable directive from component template

Question

I want to do a full screen directive but something is not working in my case. I need access to isFullScreen variable from the directive to the template because the "*ngIf" but I don't know what I am doing wrong.

This is my directive:

Directive

import { DOCUMENT } from '@angular/common'; import { Directive, HostListener, Inject, Input } from '@angular/core'; @Directive({ selector: '[appFullScreen]' }) export class FullScreenDirective { @Input() isFullScreen: boolean = false; elem: any; constructor(@Inject(DOCUMENT) private document: any) { } ngOnInit(): void { this.chkScreenMode(); this.elem = document.documentElement; } @HostListener('document:fullscreenchange', ['$event']) @HostListener('document:webkitfullscreenchange', ['$event']) @HostListener('document:mozfullscreenchange', ['$event']) @HostListener('document:MSFullscreenChange', ['$event']) fullscreenmodes(event){ this.chkScreenMode(); } chkScreenMode(){ if(document.fullscreenElement){ this.isFullScreen = true; }else{ this.isFullScreen = false; } } openFullscreen() { if (this.elem.requestFullscreen) { this.elem.requestFullscreen(); } else if (this.elem.mozRequestFullScreen) { /* Firefox */ this.elem.mozRequestFullScreen(); } else if (this.elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ this.elem.webkitRequestFullscreen(); } else if (this.elem.msRequestFullscreen) { /* IE/Edge */ this.elem.msRequestFullscreen(); } } /* Close fullscreen */ closeFullscreen() { if (document.exitFullscreen) { this.document.exitFullscreen(); } else if (this.document.mozCancelFullScreen) { /* Firefox */ this.document.mozCancelFullScreen(); } else if (this.document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ this.document.webkitExitFullscreen(); } else if (this.document.msExitFullscreen) { /* IE/Edge */ this.document.msExitFullscreen(); } } }

This is my component template:

HTML

 <button [appFullScreen]="isFullScreen" class="mat-icon-button" [ngClass]="{ 'exit-full-screen': isFullScreen, 'enter-full-screen': !isFullScreen }" matTooltip="{{ isFullScreen ? 'Exit fullScreen' : 'Enter fullScreen' }}" > <mat-icon class="screen" *ngIf="!isFullScreen">fullscreen</mat-icon> <mat-icon class="screen" *ngIf="isFullScreen">fullscreen_exit</mat-icon> </button>

Could you help me please?

Ashot Aleqsanyan · Accepted Answer · 2022-06-17 14:05:40Z

If you need to use your directive properties in your template, then at first you need to get the directive instance in the template.

To be able to get a directive instance in your template, you need to add exportAs: exportName in your directive decorator:

Like this:

@Directive({ selector: '[appFullScreen]', exportAs: 'appFullScreen' // <---------- added this line }) export class FullScreenDirective { @Input() isFullScreen: boolean = false; elem: any; constructor(@Inject(DOCUMENT) private document: any) { } ngOnInit(): void { this.chkScreenMode(); this.elem = document.documentElement; } @HostListener('document:fullscreenchange', ['$event']) @HostListener('document:webkitfullscreenchange', ['$event']) @HostListener('document:mozfullscreenchange', ['$event']) @HostListener('document:MSFullscreenChange', ['$event']) fullscreenmodes(event){ this.chkScreenMode(); } chkScreenMode(){ if(document.fullscreenElement){ this.isFullScreen = true; }else{ this.isFullScreen = false; } } toggleFullScreen() { if(this.isFullScreen) { this.closeFullscreen() } else { this.openFullscreen(); } this.isFullScreen = !this.isFullScreen; } openFullscreen() { if (this.elem.requestFullscreen) { this.elem.requestFullscreen(); } else if (this.elem.mozRequestFullScreen) { /* Firefox */ this.elem.mozRequestFullScreen(); } else if (this.elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ this.elem.webkitRequestFullscreen(); } else if (this.elem.msRequestFullscreen) { /* IE/Edge */ this.elem.msRequestFullscreen(); } } /* Close fullscreen */ closeFullscreen() { if (document.exitFullscreen) { this.document.exitFullscreen(); } else if (this.document.mozCancelFullScreen) { /* Firefox */ this.document.mozCancelFullScreen(); } else if (this.document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ this.document.webkitExitFullscreen(); } else if (this.document.msExitFullscreen) { /* IE/Edge */ this.document.msExitFullscreen(); } } }

And now you can your directive instance in your template

Template Code

 <button appFullScreen #fullScreenRef="appFullScreen" class="mat-icon-button" [ngClass]="{ 'exit-full-screen': fullScreenRef.isFullScreen, 'enter-full-screen': !fullScreenRef.isFullScreen }" matTooltip="{{ fullScreenRef.isFullScreen ? 'Exit fullScreen' : 'Enter fullScreen' }}" (click)="fullScreenRef.toggleFullScreen()" > <mat-icon class="screen" *ngIf="!fullScreenRef.isFullScreen">fullscreen</mat-icon> <mat-icon class="screen" *ngIf="fullScreenRef.isFullScreen">fullscreen_exit</mat-icon> </button>

PLEASE NOTE: #fullScreenRef="here you need to pass value of exportAs Property from directive"

Thank you for your answer but after change the code it is the same. Nothing happen when I click on the button. Do you know which could be the problem?
@beanic I have updated the answer, I think you need to add an click event listener, also I have added new method in you directive
Oh my goodness! I have completely forgotten the click event listener. You have made my day. Thanks a million for your help Ashot Aleqsanyan

Collectives™ on Stack Overflow

Access to variable directive from component template

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related