Dynamically inject component on dynamically added elements in Angular2 and Gridster2

Question

I'm using the angular-gridster2 library to add items to a page. I want to load content in those items being added. The elements are placed via an ngFor and added/removed via a service. I've looked at ComponentFactoryResolver and componentRef for loading dynamic content but all the tutorials show doing this in a single static target using something like <div #container></div>. However, mine is:

<div id="grid">
    <gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard;let i = index;">
      <div class="grid-header drag-handle">
        <span class="handle-icon"><i class="material-icons">open_with</i></span>
        <span class="close-icon" (click)="removePanel(item)"><i class="material-icons">close</i></span>
      </div>

I have a component for my "navigation" selecting that adds an element to the page I want to pass a type as well that dictates what is dynamically loaded into the added element. Currently I'm passing a size (click)="add(large)" which pushes the "large" size array to the server to place the element on the page:

  add(size,type){
    size = size || 'default';

    let newSize = this.sizeOptions[size];

    if(!this.gridElements.options.api.getNextPossiblePosition(newSize)) {
      alert('hey, no can do, buddy!');
      return false;
    }

    let tDate = new Date();

    let tSize = {
      ...newSize
    };

    this.dashboard.push(tSize);
    this.gridElements.changeGrid(this.dashboard);
  }

my app.component.html looks like this:

<mat-sidenav-container>
    <div id="page-content">
        <app-header></app-header>
        <app-navigation></app-navigation>
        <app-grid></app-grid>
        <app-alerts #alertwindow2></app-alerts>
    </div>
</mat-sidenav-container>

Again, app-navigation and app-grid are connected via grid-component.service to allow the add in navigation to pass the element added to grid. I want to place a dynamic component on each grid item thats specified in click such as (click)="add('large','comp1')" then passes that off to the service which in turn handles the request and loads the content in the newly created grid item.