title: Dynamic Clarity App Level Alerts
body: <p>I am using the <a href="https://vmware.github.io/clarity/" rel="nofollow noreferrer"><code>vmware/clarity</code> design system</a> and I'm trying to implement dynamic app-level alerts using the dynamic component loading <a href="https://angular.io/guide/dynamic-component-loader" rel="nofollow noreferrer">outlined in angular.io</a>.  I've followed this pattern before, but I can't seem to get this to work with the alerts coming from Clarity.</p>
  
  <h3>app.component.ts</h3>
  
  <pre class="lang-js prettyprint-override"><code>import { AfterViewInit, Component, ComponentFactoryResolver, OnDestroy, ViewChild } from '@angular/core';
  import { ClrAlert } from '@clr/angular';
  
  import { AlertsHostDirective } from './directives/alerts-host.directive';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements AfterViewInit, OnDestroy {
  
    @ViewChild(AlertsHostDirective) alerts: AlertsHostDirective;
    private interval: NodeJS.Timer;
  
    constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }
  
    ngAfterViewInit(): void {
      this.alert();
      this.getAlerts();
    }
  
    ngOnDestroy(): void {
      clearInterval(this.interval);
    }
  
    private alert() {
      const componentFactory = this._componentFactoryResolver.resolveComponentFactory(ClrAlert);
  
      const viewContainerRef = this.alerts.viewContainerRef;
      const componentRef = viewContainerRef.createComponent(componentFactory);
  
      componentRef.instance.isAppLevel = true;
      componentRef.changeDetectorRef.detectChanges();
    }
  
    private getAlerts() {
      this.interval = setInterval(() =&gt; {
        this.alert();
      }, 5000);
    }
  
  }
  </code></pre>
  
  <h3>app.component.html</h3>
  
  <pre><code>&lt;clr-main-container&gt;
      &lt;clr-alerts&gt;
          &lt;ng-template appAlertsHost&gt;&lt;/ng-template&gt;
          &lt;clr-alert clrAlertType="info"
                     [clrAlertAppLevel]="true"&gt;
              &lt;div class="alert-item"&gt;
                  &lt;span class="alert-text"&gt;This is the first app level alert.    &lt;/span&gt;
                  &lt;div class="alert-actions"&gt;
                      &lt;button class="btn alert-action"&gt;Fix&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/clr-alert&gt;
          &lt;clr-alert clrAlertType="danger"
                     [clrAlertAppLevel]="true"&gt;
              &lt;div class="alert-item"&gt;
                  &lt;span class="alert-text"&gt;This is a second app level alert.&lt;/span&gt;
                  &lt;div class="alert-actions"&gt;
                      &lt;button class="btn alert-action"&gt;Fix&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/clr-alert&gt;
      &lt;/clr-alerts&gt;
  ...
  </code></pre>
  
  <h3>alerts-host.directive.ts</h3>
  
  <pre class="lang-js prettyprint-override"><code>import { Directive, ViewContainerRef } from '@angular/core';
  
  @Directive({
    selector: '[appAlertsHost]'
  })
  export class AlertsHostDirective {
  
    constructor(public viewContainerRef: ViewContainerRef) { }
  
  }
  </code></pre>
  
  <p>If I put the directive on the <code>ClrAlerts</code> component, it works the way it should in that app level alerts are appended after the <code>ClrAlerts</code> in the DOM.  But I want all my app-level alerts to appear inside that component as they come in.  In turn, I'd like for the pager component that appears to be updated as well.</p>
  
  <p>Is this possible?</p>