Angular 5 fullscreen single div container

Question

I have a grid inside a div. I am able to enter fullscreen using a function but I am looking to just make the div with the grid in it full So far all I have been able to find is limited to making the entire web page fullscreen. This is what I have.

    <a (click)="openFullscreen()"title="Full Screen" style="padding-right: 5px"><i class="fa fa-arrows-alt"></i></a>
    <div class="row">
            <grid>
                stuff
           </grid>
        </div>

TS

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();
    }
  }

///////////////EDITS//////////////

TS

  @ViewChild('fullScreen') divRef;

  ngOnInit() {
    this.divRef = document.documentElement;        
  }

openFullscreen() {
    if (this.divRef.requestFullscreen) {
      this.divRef.requestFullscreen();
    } else if (this.divRef.mozRequestFullScreen) {
      /* Firefox */
      this.divRef.mozRequestFullScreen();
    } else if (this.divRef.webkitRequestFullscreen) {
      /* Chrome, Safari and Opera */
      this.divRef.webkitRequestFullscreen();
    } else if (this.divRef.msRequestFullscreen) {
      /* IE/Edge */
      this.divRef.msRequestFullscreen();
    }
  }

HTML

    <a (click)="openFullscreen()"title="Full Screen" style="padding-right: 5px"><i class="fa fa-arrows-alt"></i></a>
    <div class="well" #fullScreen>
        <grid>
             stuff
        </grid>
    </div>

Answer 1

You can set a template variable to the element you want to make fullscreen:

<a (click)="openFullscreen()" title="Full Screen"> Toggle fullscreen </a>
<div class="row" #fullScreen>
   <grid>
       stuff
   </grid>
</div>

then in your component you can get a reference to that element using the View Child decorator and execute the function you already have:

@ViewChild('fullScreen') divRef;

openFullscreen() {
  // Use this.divRef.nativeElement here to request fullscreen
  const elem = this.divRef.nativeElement;

  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
}