title: Angular CDK - Injecting the Custom overlay container class into a component creates new instance of it
body: <p><strong>Requirement</strong></p>
  <p>Use a custom <code>OverlayContainer</code> class in order to open Angular Material <code>Snackbars</code> on a specific DOM element (not on <code>body</code>).</p>
  <p>At this point, I know that:</p>
  <ul>
  <li>the <code>OverlayContainer</code> class is a singleton</li>
  <li>I want to display <strong>only the snackbars on a specific DOM element</strong> and let the Dialogs, Tooltips and the other Material elements use the default overlay container element that is appended to <code>body</code>.</li>
  </ul>
  <p><strong>The code I've tried</strong></p>
  <p>I provided the custom class in the providers array.</p>
  <pre class="lang-js prettyprint-override"><code>providers: [
    {provide: OverlayContainer, useClass: AppOverlayContainer}
  ]
  </code></pre>
  <p>And the class is:</p>
  <pre class="lang-js prettyprint-override"><code>export class AppOverlayContainer extends OverlayContainer {
  
    /**
     * Append the OverlayContainer to the custom element
     */
     public appendToCustomContainer(element: HTMLElement): void {
  
  
       // this._containerElement is 'cdk-overlay-container'
       element.appendChild(this._containerElement);
     }
  
     **
     * Remove the OverlayContainer from the custom element and append it to body
     */
     public removeFromCustomContainer(): void {
       this._document.body.appendChild(this._containerElement);
     }
  }
  </code></pre>
  <p><strong>In my component</strong>, before opening a snackbar, I will call:</p>
  <pre class="lang-js prettyprint-override"><code>AppOverlayContainer.appendToCustomContainer(HTMLElement)
  </code></pre>
  <p>And after the snackbar closes, I will call:</p>
  <pre class="lang-js prettyprint-override"><code>AppOverlayContainer.removeFromCustomContainer();
  </code></pre>
  <p><strong>The issue:</strong></p>
  <p>When injecting the <code>AppOverlayContainer</code> into the component constructor, it will create a new instance of this class and also of the <code>OverlayContainer</code>:</p>
  <pre class="lang-js prettyprint-override"><code>constructor(
    private _snackBar: MatSnackBar,
    private _appOverlayContainer: AppOverlayContainer
  ) {}
  </code></pre>
  <p>It works only if I inject the <code>OverlayContainer</code>, then use it like:</p>
  <pre class="lang-js prettyprint-override"><code>constructor(
    private _snackBar: MatSnackBar,
    private _appOverlayContainer: OverlayContainer
  ) {}
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>(this._appOverlayContainer as AppOverlayContainer).appendToCustomContainer(appOverlayWrapperContainer);
  
  (this._appOverlayContainer as AppOverlayContainer).removeFromCustomContainer();
  </code></pre>
  <p>Which seems kind of tricky.</p>
  <p>I really don't understand what I am missing here.</p>
  <p><strong>Stackblitz</strong></p>
  <p><a href="https://stackblitz.com/edit/angular-wksbmf-9xdxcv" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-wksbmf-9xdxcv</a></p>