diff --git a/terminus-settings/src/components/settingsTabBody.component.ts b/terminus-settings/src/components/settingsTabBody.component.ts
index 2616617a..c3b6e519 100644
--- a/terminus-settings/src/components/settingsTabBody.component.ts
+++ b/terminus-settings/src/components/settingsTabBody.component.ts
@@ -1,10 +1,25 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, ViewContainerRef, ViewChild, ComponentFactoryResolver, ComponentRef } from '@angular/core'
 import { SettingsTabProvider } from '../api'
 
 @Component({
     selector: 'settings-tab-body',
-    template: '<ng-container *ngComponentOutlet="provider.getComponentType()"></ng-container>',
+    template: '<ng-template #placeholder></ng-template>',
 })
 export class SettingsTabBodyComponent {
     @Input() provider: SettingsTabProvider
+    @ViewChild('placeholder', {read: ViewContainerRef}) placeholder: ViewContainerRef
+    private component: ComponentRef<Component>
+
+    constructor (private componentFactoryResolver: ComponentFactoryResolver) { }
+
+    ngAfterViewInit () {
+        // run after the change detection finishes
+        setImmediate(() => {
+            this.component = this.placeholder.createComponent(
+                this.componentFactoryResolver.resolveComponentFactory(
+                    this.provider.getComponentType()
+                )
+            )
+        })
+    }
 }