title: Angular Overlay Bottom Right of ViewPort
body: <p>I have taken over development of an Angular 12 application which makes use of an overlay to display a loading spinner in the center of the viewport.  Code in the <code>SpinnerOverlayService</code> looks like so:</p>
  <pre><code>private show(): void {
  Promise.resolve(null).then(() =&gt; {
    this.overlayRef = this.overlay.create({
      positionStrategy: this.overlay
        .position()
        .global()
        .centerHorizontally()
        .centerVertically(),
      hasBackdrop: true,
    });
    this.overlayRef.attach(new ComponentPortal(SpinnerOverlayComponent));
  });
  </code></pre>
  <p>However, the client wants this changed so that the spinner displays in the bottom right corner of the viewport instead.</p>
  <p>I've found this in the Overlay <a href="https://material.angular.io/cdk/overlay/api#PositionStrategy" rel="nofollow noreferrer">API documentation</a>:
  <a href="https://i.stack.imgur.com/mPqTQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mPqTQ.png" alt="enter image description here" /></a>
  which seems like it should achieve what I want.  However, there is no context as to how one should actually implement this method.</p>
  <p>Please advise as to how I can do so?</p>