⚠️ Mixin UI is currently in alpha stage
mixin
v0.0.1-alpha.3
Documentation
Customization
Components
Directives
Services
Pipes
Utils
Pipes

Typed Outlet

Transforms a union type representing dynamic content into a discriminated structure that enables precise rendering via Angular’s built-in structural directives — directly in the template.

Import

import {
  XTypedOutletPipe,
  XOutlet // optional
} from '@mixin-ui/cdk';

Usage

@Component({
  template: `
    @let c = content() | typedOutlet;

    @if (c.type === 'component') {
      <ng-container *ngComponentOutlet="c.outlet" />
    } @else if (c.type === 'template') {
      <ng-container *ngTemplateOutlet="c.outlet" />
    } @else {
      {{ c.outlet }}
    }
  `
})
export class Usage {
  /**
   * XOutlet = Type | TemplateRef | string | null | undefined;
   */
  readonly content = input<XOutlet>();
}

Purpose

Use typedOutlet when your input may be a component type (Type), a template (TemplateRef), a string, or null/undefined, and you want to narrow its type within the template to render it using *ngComponentOutlet, *ngTemplateOutlet, or text interpolation accordingly.

Previous
Map
Next
Operators