Portal

API for portal

API reference for Angular CDK portal

import {PortalModule} from '@angular/cdk/portal';

Directive version of a TemplatePortal. Because the directive is a TemplatePortal, the directive instance itself can be attached to a host, enabling declarative use of portals.

Selector: [cdk-portal] [cdkPortal] [portal]

Exported as: cdkPortal
Properties
Name Description

context: C | undefined

Contextual data to be passed in to the embedded view.

isAttached: boolean

Whether this portal is attached to a host.

origin: ElementRef

templateRef: TemplateRef<C>

The embedded template that will be used to instantiate an embedded View in the host.

viewContainerRef: ViewContainerRef

Reference to the ViewContainer into which the template will be stamped out.
Methods
attach

Attach the portal to the provided PortalOutlet. When a context is provided it will override the context property of the TemplatePortal instance.
Parameters

host

PortalOutlet

context

C = this.context

Returns
C

detach
setAttachedHost

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().
Parameters

host

PortalOutlet

Directive version of a PortalOutlet. Because the directive is a PortalOutlet, portals can be directly attached to it, enabling declarative use.

Usage: <ng-template [cdkPortalOutlet]="greeting"></ng-template>

Selector: [cdkPortalOutlet] [cdkPortalHost] [portalHost]

Exported as: cdkPortalOutlet, cdkPortalHost
Properties
Name Description
@Input( cdkPortalOutlet)

portal: Portal<any> | null

Portal associated with the Portal outlet.
@Output()

attached: EventEmitter<CdkPortalOutletAttachedRef>

Emits when a portal is attached to the outlet.

attachedRef: CdkPortalOutletAttachedRef

Component or view reference that is attached to the portal.
Methods
attach
Parameters

portal

ComponentPortal<T>

Returns
ComponentRef<T>

attach
Parameters

portal

TemplatePortal<T>

Returns
EmbeddedViewRef<T>

attach
Parameters

portal

any

Returns
any

attachComponentPortal

Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
Parameters

portal

ComponentPortal<T>

Portal to be attached to the portal outlet.
Returns
ComponentRef<T>

Reference to the created component.
attachTemplatePortal

Attach the given TemplatePortal to this PortlHost as an embedded View.
Parameters

portal

TemplatePortal<C>

Portal to be attached.
Returns
EmbeddedViewRef<C>

Reference to the created embedded view.
detach

Detaches a previously attached portal.
dispose

Permanently dispose of this portal host.
hasAttached

Whether this host has an attached portal.
Returns
boolean

A Portal is something that you want to render somewhere else. It can be attach to / detached from a PortalOutlet.

Properties
Name Description

isAttached: boolean

Whether this portal is attached to a host.
Methods
attach

Attach this portal to a host.
Parameters

host

PortalOutlet

Returns
T

detach

Detach this portal from its host
setAttachedHost

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().
Parameters

host

PortalOutlet

A ComponentPortal is a portal that instantiates some Component upon attachment.

Properties
Name Description

component: ComponentType<T>

The type of the component that will be instantiated for attachment.

componentFactoryResolver: ComponentFactoryResolver | null

Alternate ComponentFactoryResolver to use when resolving the associated component. Defaults to using the resolver from the outlet that the portal is attached to.

injector: Injector | null

[Optional] Injector used for the instantiation of the component.

isAttached: boolean

Whether this portal is attached to a host.

viewContainerRef: ViewContainerRef | null

[Optional] Where the attached component should live in Angular's logical component tree. This is different from where the component renders, which is determined by the PortalOutlet. The origin is necessary when the host is outside of the Angular application context.
Methods
attach

Attach this portal to a host.
Parameters

host

PortalOutlet

Returns
T

detach

Detach this portal from its host
setAttachedHost

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().
Parameters

host

PortalOutlet

A TemplatePortal is a portal that represents some embedded template (TemplateRef).

Properties
Name Description

context: C | undefined

Contextual data to be passed in to the embedded view.

isAttached: boolean

Whether this portal is attached to a host.

origin: ElementRef

templateRef: TemplateRef<C>

The embedded template that will be used to instantiate an embedded View in the host.

viewContainerRef: ViewContainerRef

Reference to the ViewContainer into which the template will be stamped out.
Methods
attach

Attach the portal to the provided PortalOutlet. When a context is provided it will override the context property of the TemplatePortal instance.
Parameters

host

PortalOutlet

context

C = this.context

Returns
C

detach
setAttachedHost

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().
Parameters

host

PortalOutlet

Partial implementation of PortalOutlet that handles attaching ComponentPortal and TemplatePortal.

Methods
attach
Parameters

portal

ComponentPortal<T>

Returns
ComponentRef<T>

attach
Parameters

portal

TemplatePortal<T>

Returns
EmbeddedViewRef<T>

attach
Parameters

portal

any

Returns
any

attachComponentPortal
Parameters

portal

ComponentPortal<T>

Returns
ComponentRef<T>

attachTemplatePortal
Parameters

portal

TemplatePortal<C>

Returns
EmbeddedViewRef<C>

detach

Detaches a previously attached portal.
dispose

Permanently dispose of this portal host.
hasAttached

Whether this host has an attached portal.
Returns
boolean

A PortalOutlet for attaching portals to an arbitrary DOM element outside of the Angular application context.

Properties
Name Description

outletElement: Element

Element into which the content is projected.
Methods
attach
Parameters

portal

ComponentPortal<T>

Returns
ComponentRef<T>

attach
Parameters

portal

TemplatePortal<T>

Returns
EmbeddedViewRef<T>

attach
Parameters

portal

any

Returns
any

attachComponentPortal

Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
Parameters

portal

ComponentPortal<T>

Portal to be attached
Returns
ComponentRef<T>

Reference to the created component.
attachTemplatePortal

Attaches a template portal to the DOM as an embedded view.
Parameters

portal

TemplatePortal<C>

Portal to be attached.
Returns
EmbeddedViewRef<C>

Reference to the created embedded view.
detach

Detaches a previously attached portal.
dispose

Clears out a portal from the DOM.
hasAttached

Whether this host has an attached portal.
Returns
boolean

Interface that can be used to generically type a class.

Methods
new
Parameters

...args

any[]

Returns
T

A PortalOutlet is an space that can contain a single Portal.

Methods
attach

Attaches a portal to this outlet.
Parameters

portal

Portal<any>

Returns
any

detach

Detaches the currently attached portal from this outlet.
Returns
any

dispose

Performs cleanup before the outlet is destroyed.
hasAttached

Whether there is currently a portal attached to this outlet.
Returns
boolean

Possible attached references to the CdkPortalOutlet.

type CdkPortalOutletAttachedRef = ComponentRef<any> | EmbeddedViewRef<any> | null;