CODEWITHSUNDEEP
angularangular-directive
beanic
beanic

Reputation: 562

Access to variable directive from component template

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?

Upvotes: 2

Views: 1842

Answers (1)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

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"

Upvotes: 4

Related Questions