title: How to dynamically resize a PixiJS (HTML) canvas within angular component
body: <p>I've written an angular component which creates and renders (renders a single time) a Pixi canvas.</p>
  
  <p>Here is the component (excuse the bad name I'm still new to angular):</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  declare var PIXI: any;
  declare var $: any;
  
  @Component({
    selector: 'pixi-component',
    templateUrl: './pixi-component.component.html',
    styleUrls: ['./pixi-component.component.css']
  })
  export class PixiComponentComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
      this.generatePixiCanvas();
      console.log("pixi component is created");
    }
  
    generatePixiCanvas() {
        //Create the canvas and add it the DOM...
        var renderer = PIXI.autoDetectRenderer(this.getParentDivWidth(), this.getParentDivHeight());
        document.getElementById('pixi-canvas-container').appendChild(renderer.view);
        renderer.autoResize = true;
  
        //Create a container object called the `stage` and render it...
        var stage = new PIXI.Container();
        renderer.render(stage);
    }
  
    getParentDivHeight() {
      return $('#pixi-canvas-container').height();
    }
  
    getParentDivWidth() {
      return $('#pixi-canvas-container').width() + 1;
    }
  }
  </code></pre>
  
  <p>You can see that this component creates the pixi canvas within the ngOnInit function, but it creates it with a set height and width (returned from the stub helper functions).</p>
  
  <p>What I want to do is two-fold:</p>
  
  <ol>
  <li><s>On page load, create the pixi canvas so that it's size is EQUAL to the size of its parent container. Similar to what CSS <code>{height: 100%; width: 100%}</code> would do.</s></li>
  <li>On window resize, the pixi canvas dynamically resizes with the rest of the webpage, like what a CSS flex box would do.</li>
  </ol>
  
  <p>My original idea was to use those two stub functions <code>getParentDivHeight</code> and <code>getParentDivWidth</code> to deal with the first problem, but I was unable to find an angular-y way of doing this. I think I might be able to use JQuery?</p>
  
  <p>As for the second problem, I'm not sure how to get an angular component to listen to window resize events. </p>
  
  <p>How can I solve this problem?</p>
  
  <p>Also, here's the HTML and CSS code for the above component, in case it helps:</p>
  
  <pre><code>&lt;div id="pixi-canvas-container"&gt;
  
  &lt;/div&gt;
  
  #pixi-canvas-container {
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>After a little bit of research, it seems that a custom directive to watch window resizes could do the trick. Would I need to write a custom directive to somehow resize the pixi canvas? The problem with this would be that the directive would need to be attached to the pixi canvas when it is created (at runtime) which may not be possible with angular.</p>
  
  <p>EDIT2:</p>
  
  <p>Okay, I've managed to solve problem 1 using JQuery. I've gone ahead and edited my code to reflect this. Problem 2 still remains as the pixi canvas does not respond to page resizes or resolution changes.</p>