Skip to content

Instantly share code, notes, and snippets.

@cgatian
Last active October 24, 2017 01:13
Show Gist options
  • Save cgatian/778be5020c35c7cca46aff97aae9172c to your computer and use it in GitHub Desktop.
Save cgatian/778be5020c35c7cca46aff97aae9172c to your computer and use it in GitHub Desktop.
app component using portals
import { DomPortalHost, Portal, ComponentPortal } from '@angular/cdk/portal';
@Component({
selector: 'my-app',
template: '',
})
export class AppComponent implements OnInit {
private portalHost: DomPortalHost;
private portal: ComponentPortal<HeaderComponent>;
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private injector: Injector,
private appRef: ApplicationRef,
) { }
ngOnInit() {
// Create a portalHost from a DOM element
this.portalHost = new DomPortalHost(
document.querySelector('#pageHeader'),
this.componentFactoryResolver,
this.appRef,
this.injector
);
// Locate the component factory for the HeaderComponent
this.portal = new ComponentPortal(HeaderComponent);
// Attach portal to host
this.portalHost.attach(this.portal);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment