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

4

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"

edited Jun 17, 2022 at 14:05

answered Jun 17, 2022 at 13:19

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

beanic Over a year ago

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?

Ashot Aleqsanyan Over a year ago

@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

beanic Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related