### Implement Customizable ComboBox with Polymorpheus

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

This example shows the full implementation of a generic ComboBox component. It utilizes PolymorpheusOutlet for dynamic content rendering and PolymorpheusTemplate for custom styling of list items and empty states.

```typescript
import { Component, input, model, signal, computed } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusContent, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';

interface ItemContext<T> {
  $implicit: T;
  active: boolean;
}

@Component({
  selector: 'app-menu',
  imports: [PolymorpheusOutlet],
  template: `
    @for (item of items(); track $index) {
      <div
        class="item"
        [class.active]="activeItem() === item"
        (click)="onItemClick(item)"
        (mouseenter)="activeItem.set(item)"
      >
        <ng-container
          *polymorpheusOutlet="content() as text; context: { $implicit: item, active: activeItem() === item }"
        >
          {{ text }}
        </ng-container>
      </div>
    } @empty {
      <div class="empty">
        <ng-container *polymorpheusOutlet="emptyContent() as text">
          {{ text }}
        </ng-container>
      </div>
    }
  `,
  host: { '(mouseleave)': 'activeItem.set(null)' }
})
export class MenuComponent<T> {
  readonly activeItem = signal<T | null>(null);
  items = input<readonly T[]>([]);
  emptyContent = input<PolymorpheusContent>('No items found');
  content = input<PolymorpheusContent<ItemContext<T>>>(
    ({ $implicit }) => String($implicit)
  );
  itemSelected = model<T>();
  onItemClick(item: T): void {
    this.itemSelected.set(item);
  }
}

@Component({
  selector: 'app-combo-box',
  imports: [MenuComponent],
  template: `
    <input
      [value]="searchText()"
      [placeholder]="placeholder()"
      (input)="onSearch($event)"
      (focus)="open.set(true)"
    />
    @if (open()) {
      <app-menu
        [items]="filteredItems()"
        [content]="itemContent()"
        [emptyContent]="emptyContent()"
        (itemSelectedChange)="onSelect($event)"
      />
    }
  `
})
export class ComboBoxComponent<T> {
  readonly open = signal(false);
  readonly searchText = signal('');
  items = input<readonly T[]>([]);
  placeholder = input('Search...');
  stringify = input<(item: T) => string>(String);
  itemContent = input<PolymorpheusContent<ItemContext<T>>>(
    ({ $implicit }) => String($implicit)
  );
  emptyContent = input<PolymorpheusContent>('Nothing found');
  value = model<T | undefined>();
  filteredItems = computed(() => {
    const search = this.searchText().toLowerCase();
    return this.items().filter(item =>
      this.stringify()(item).toLowerCase().includes(search)
    );
  });
  onSearch(event: Event): void {
    this.searchText.set((event.target as HTMLInputElement).value);
    this.open.set(true);
  }
  onSelect(item: T): void {
    this.value.set(item);
    this.searchText.set(this.stringify()(item));
    this.open.set(false);
  }
}
```

--------------------------------

### Provide Context Manually with Polymorpheus in Angular

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Explains how to use the `provideContext` function to create a provider for the `POLYMORPHEUS_CONTEXT` token. This is useful for manually providing context in custom injector scenarios or during testing. The example shows creating a tooltip component with dynamically injected context.

```typescript
import { Component, Injector, ViewContainerRef } from '@angular/core';
import { provideContext, POLYMORPHEUS_CONTEXT, injectContext } from '@taiga-ui/polymorpheus';

// Component that uses context
@Component({
  selector: 'app-dynamic-tooltip',
  template: `<div class="tooltip">{{ context.message }}</div>`
})
export class DynamicTooltipComponent {
  readonly context = injectContext<{ message: string }>();
}

// Creating component with manual context injection
@Component({
  selector: 'app-tooltip-host',
  template: `<div #container></div>`
})
export class TooltipHostComponent {
  constructor(
    private vcr: ViewContainerRef,
    private injector: Injector
  ) {}

  showTooltip(message: string): void {
    // Create custom injector with context
    const customInjector = Injector.create({
      parent: this.injector,
      providers: [provideContext({ message })]
    });

    // Create component with custom injector
    this.vcr.createComponent(DynamicTooltipComponent, {
      injector: customInjector
    });
  }
}

// In tests:
// TestBed.configureTestingModule({
//   providers: [provideContext({ message: 'Test tooltip' })]
// });

```

--------------------------------

### Inject Context in Angular Components with Polymorpheus

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Demonstrates using the `injectContext` helper function to inject reactive context into Angular components rendered via `PolymorpheusOutlet`. The context object is live and updates automatically. This example shows an expandable card component that displays content based on its provided context.

```typescript
import { Component, computed } from '@angular/core';
import { injectContext, PolymorpheusComponent, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';

interface CardContext {
  $implicit: {
    title: string;
    description: string;
    tags: string[];
  };
  expanded: boolean;
  index: number;
}

@Component({
  selector: 'app-expandable-card',
  template: `
    <article [class.expanded]="context.expanded">
      <header>
        <span class="index">#{{ context.index + 1 }}</span>
        <h2>{{ context.$implicit.title }}</h2>
      </header>
      @if (context.expanded) {
        <p>{{ context.$implicit.description }}</p>
        <div class="tags">
          @for (tag of context.$implicit.tags; track tag) {
            <span class="tag">{{ tag }}</span>
          }
        </div>
      }
    </article>
  `
})
export class ExpandableCardComponent {
  // Inject context - it's a live object that updates automatically
  readonly context = injectContext<CardContext>();

  // Can also use with optional flag
  // readonly optionalContext = injectContext<CardContext>({ optional: true });
}

// Parent component
@Component({
  selector: 'app-card-list',
  imports: [PolymorpheusOutlet],
  template: `
    @for (item of items; track item.title; let i = $index) {
      <div (click)="toggleExpand(i)">
        <ng-container
          *polymorpheusOutlet="cardContent; context: {
            $implicit: item,
            expanded: expandedIndex === i,
            index: i
          }"
        />
      </div>
    }
  `
})
export class CardListComponent {
  items = [
    { title: 'First', description: 'First item details', tags: ['new', 'featured'] },
    { title: 'Second', description: 'Second item details', tags: ['popular'] }
  ];

  expandedIndex: number | null = null;
  cardContent = new PolymorpheusComponent(ExpandableCardComponent);

  toggleExpand(index: number): void {
    this.expandedIndex = this.expandedIndex === index ? null : index;
  }
}

```

--------------------------------

### Implementing PolymorpheusOutlet Directive

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Demonstrates how to use the *polymorpheusOutlet directive to render dynamic content with specific context. It shows how to pass data to the outlet and handle state changes within a component.

```typescript
import { Component } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusContent } from '@taiga-ui/polymorpheus';

interface MenuContext {
  $implicit: string;
  active: boolean;
}

@Component({
  selector: 'app-custom-menu',
  imports: [PolymorpheusOutlet],
  template: `
    @for (item of items; track item) {
      <div
        class="menu-item"
        [class.active]="activeItem === item"
        (mouseenter)="activeItem = item"
      >
        <ng-container
          *polymorpheusOutlet="content as text; context: { $implicit: item, active: activeItem === item }"
        >
          {{ text }}
        </ng-container>
      </div>
    }
  `
})
export class CustomMenuComponent {
  items = ['Home', 'About', 'Contact'];
  activeItem: string | null = null;
  content: PolymorpheusContent<MenuContext> = ({ $implicit }) => String($implicit);
}
```

--------------------------------

### Dynamic Component Instantiation with PolymorpheusComponent

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Shows how to wrap Angular components for dynamic use via PolymorpheusComponent. It covers accessing context via injection tokens and automatic input synchronization.

```typescript
import { Component, input } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusComponent, injectContext } from '@taiga-ui/polymorpheus';

@Component({
  selector: 'app-avatar-card',
  template: `<div class="card" [class.active]="context.active">
      <img [src]="context.$implicit.avatar" [alt]="context.$implicit.name" />
      <h3>{{ context.$implicit.name }}</h3>
      <p>{{ context.$implicit.bio }}</p>
    </div>`
})
export class AvatarCardComponent {
  readonly context = injectContext<{ $implicit: { name: string; avatar: string; bio: string }; active: boolean }>();
}

@Component({
  selector: 'app-profile-list',
  imports: [PolymorpheusOutlet],
  template: `@for (profile of profiles; track profile.name) {
      <ng-container *polymorpheusOutlet="cardComponent; context: { $implicit: profile, active: hoveredProfile === profile.name }" />
    }`
})
export class ProfileListComponent {
  profiles = [{ name: 'Jane', avatar: '/jane.png', bio: 'Developer' }, { name: 'John', avatar: '/john.png', bio: 'Designer' }];
  hoveredProfile: string | null = null;
  cardComponent = new PolymorpheusComponent(AvatarCardComponent);
}
```

--------------------------------

### Render polymorphic content with polymorpheusOutlet

Source: https://github.com/taiga-family/polymorpheus/blob/main/README.md

Demonstrates the use of the polymorpheusOutlet structural directive to render various types of content including primitives and templates with context.

```html
<ng-container *polymorpheusOutlet="content as text; context: context">{{text}}</ng-container>
```

--------------------------------

### Dynamic Content with Handler Functions

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Illustrates the use of handler functions to generate content dynamically based on the provided context. This allows for conditional rendering logic without requiring full Angular templates.

```typescript
import { Component, input } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusContent, PolymorpheusHandler } from '@taiga-ui/polymorpheus';

interface ItemContext {
  $implicit: { id: number; name: string; price: number };
  selected: boolean;
}

@Component({
  selector: 'app-product-list',
  imports: [PolymorpheusOutlet],
  template: `
    @for (product of products; track product.id) {
      <div
        class="product"
        [class.selected]="selectedId === product.id"
        (click)="selectedId = product.id"
      >
        <ng-container
          *polymorpheusOutlet="itemContent() as label; context: { $implicit: product, selected: selectedId === product.id }"
        >
          {{ label }}
        </ng-container>
      </div>
    }
  `
})
export class ProductListComponent {
  products = [
    { id: 1, name: 'Widget', price: 9.99 },
    { id: 2, name: 'Gadget', price: 19.99 },
    { id: 3, name: 'Gizmo', price: 14.99 }
  ];

  selectedId: number | null = null;

  itemContent = input<PolymorpheusContent<ItemContext>>(
    ({ $implicit, selected }) => selected
      ? `★ ${$implicit.name} - $${$implicit.price}`
      : `${$implicit.name} - $${$implicit.price}`
  );
}
```

--------------------------------

### Using Component Content with PolymorpheusComponent

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Explains how to use `PolymorpheusComponent` to dynamically instantiate Angular components and pass context to them.

```APIDOC
## Using Component Content with PolymorpheusComponent

### Description
`PolymorpheusComponent` wraps an Angular component for dynamic instantiation. The wrapped component can access context via the `POLYMORPHEUS_CONTEXT` injection token or `injectContext()` helper. Component inputs are also synced with context keys automatically.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Example Usage
```typescript
import { Component, input } from '@angular/core';
import {
  PolymorpheusOutlet,
  PolymorpheusComponent,
  PolymorpheusContent,
  injectContext,
  POLYMORPHEUS_CONTEXT
} from '@taiga-ui/polymorpheus';

@Component({
  selector: 'app-avatar-card',
  template: `
    <div class="card" [class.active]="context.active">
      <img [src]="context.$implicit.avatar" [alt]="context.$implicit.name" />
      <h3>{{ context.$implicit.name }}</h3>
      <p>{{ context.$implicit.bio }}</p>
    </div>
  `
})
export class AvatarCardComponent {
  readonly context = injectContext<{ 
    $implicit: { name: string; avatar: string; bio: string };
    active: boolean;
  }>();
}

@Component({
  selector: 'app-badge',
  template: `
    <span class="badge" [class.highlighted]="active()">
      {{ label() }}
    </span>
  `
})
export class BadgeComponent {
  label = input('');
  active = input(false);
}

@Component({
  selector: 'app-profile-list',
  imports: [PolymorpheusOutlet],
  template: `
    @for (profile of profiles; track profile.name) {
      <ng-container
        *polymorpheusOutlet="cardComponent; context: { $implicit: profile, active: hoveredProfile === profile.name }"
      />
    }
  `
})
export class ProfileListComponent {
  profiles = [
    { name: 'Jane', avatar: '/jane.png', bio: 'Developer' },
    { name: 'John', avatar: '/john.png', bio: 'Designer' }
  ];

  hoveredProfile: string | null = null;

  cardComponent = new PolymorpheusComponent(AvatarCardComponent);
}
```
```

--------------------------------

### Managing Data Context with PolymorpheusContext

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Explains the use of the PolymorpheusContext class to standardize context objects. It demonstrates both implicit wrapping by the outlet and explicit instantiation for custom data passing.

```typescript
import { Component, signal } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusContext, PolymorpheusContent } from '@taiga-ui/polymorpheus';

@Component({
  selector: 'app-value-display',
  imports: [PolymorpheusOutlet],
  template: `
    <div class="display">
      <ng-container
        *polymorpheusOutlet="formatter() as displayValue; context: currentValue()"
      >
        <span class="value">{{ displayValue }}</span>
      </ng-container>
    </div>
  `
})
export class ValueDisplayComponent {
  currentValue = signal(42);

  formatter = signal<PolymorpheusContent<number>>(
    (value: number) => `Value: ${value.toLocaleString()}`
  );
}

@Component({
  selector: 'app-context-demo',
  imports: [PolymorpheusOutlet],
  template: `
    <ng-container *polymorpheusOutlet="content as value; context: context">
      Received: {{ value }}
    </ng-container>
  `
})
export class ContextDemoComponent {
  context = new PolymorpheusContext('Hello World');
  content: PolymorpheusContent<string> = (ctx) => ctx;
}
```

--------------------------------

### Rendering Dynamic Templates with Polymorpheus

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Demonstrates using the PolymorpheusOutlet directive to render templates with typed context. It shows both the implementation of a reusable list component and how to provide a custom template from a parent component.

```typescript
import { Component, input } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusContent, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';

interface UserContext {
  $implicit: { name: string; avatar: string; online: boolean };
  active: boolean;
}

@Component({
  selector: 'app-user-list',
  imports: [PolymorpheusOutlet, PolymorpheusTemplate],
  template: `@for (user of users; track user.name) {
      <div
        class="user-item"
        (mouseenter)="activeUser = user.name"
        (mouseleave)="activeUser = null"
      >
        <ng-container
          *polymorpheusOutlet="userTemplate() as text; context: { $implicit: user, active: activeUser === user.name }"
        >
          {{ text }}
        </ng-container>
      </div>
    }`
})
export class UserListComponent {
  users = [{ name: 'Alice', avatar: '/alice.png', online: true }, { name: 'Bob', avatar: '/bob.png', online: false }];
  activeUser: string | null = null;
  userTemplate = input<PolymorpheusContent<UserContext>>(({ $implicit }) => $implicit.name);
}

@Component({
  imports: [UserListComponent, PolymorpheusTemplate],
  template: `<app-user-list [userTemplate]="customTemplate" />
    <ng-template #customTemplate="polymorpheus" [polymorpheus]="contextType" let-user let-active="active">
      <div [class.highlight]="active">
        <img [src]="user.avatar" [alt]="user.name" />
        <span>{{ user.name }}</span>
        <span class="status" [class.online]="user.online">{{ user.online ? 'Online' : 'Offline' }}</span>
      </div>
    </ng-template>`
})
export class ParentComponent {
  readonly contextType!: UserContext;
}
```

--------------------------------

### Rendering Primitive Content

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Shows how to pass primitive values like strings or numbers to the PolymorpheusOutlet. This is the simplest use case for static or default content rendering.

```typescript
import { Component, input } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusContent } from '@taiga-ui/polymorpheus';

@Component({
  selector: 'app-notification',
  imports: [PolymorpheusOutlet],
  template: `
    <div class="notification">
      <ng-container *polymorpheusOutlet="message() as text">
        {{ text }}
      </ng-container>
    </div>
  `
})
export class NotificationComponent {
  message = input<PolymorpheusContent>('Default message');
}
```

--------------------------------

### Using Template Content with PolymorpheusTemplate

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Demonstrates how to use `ng-template` with `PolymorpheusTemplate` for type-safe context access and dynamic template rendering.

```APIDOC
## Using Template Content with PolymorpheusTemplate

### Description
Templates provide full Angular template capabilities with access to the context. Use `ng-template` with let-bindings to access context properties. The `PolymorpheusTemplate` directive adds type safety to template contexts.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
N/A

### Response
N/A

#### Example Usage
```typescript
import { Component, input } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusContent, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';

interface UserContext {
  $implicit: { name: string; avatar: string; online: boolean };
  active: boolean;
}

@Component({
  selector: 'app-user-list',
  imports: [PolymorpheusOutlet, PolymorpheusTemplate],
  template: `
    @for (user of users; track user.name) {
      <div
        class="user-item"
        (mouseenter)="activeUser = user.name"
        (mouseleave)="activeUser = null"
      >
        <ng-container
          *polymorpheusOutlet="userTemplate() as text; context: { $implicit: user, active: activeUser === user.name }"
        >
          {{ text }}
        </ng-container>
      </div>
    }
  `
})
export class UserListComponent {
  users = [
    { name: 'Alice', avatar: '/alice.png', online: true },
    { name: 'Bob', avatar: '/bob.png', online: false }
  ];

  activeUser: string | null = null;

  userTemplate = input<PolymorpheusContent<UserContext>>(
    ({ $implicit }) => $implicit.name
  );
}

// Usage with custom template in parent:
@Component({
  imports: [UserListComponent, PolymorpheusTemplate],
  template: `
    <app-user-list [userTemplate]="customTemplate" />

    <ng-template
      #customTemplate="polymorpheus"
      [polymorpheus]="contextType"
      let-user
      let-active="active"
    >
      <div [class.highlight]="active">
        <img [src]="user.avatar" [alt]="user.name" />
        <span>{{ user.name }}</span>
        <span class="status" [class.online]="user.online">
          {{ user.online ? 'Online' : 'Offline' }}
        </span>
      </div>
    </ng-template>
  `
})
export class ParentComponent {
  readonly contextType!: UserContext;
}
```
```

--------------------------------

### Inject context into dynamic components

Source: https://github.com/taiga-family/polymorpheus/blob/main/README.md

Shows how to access live context data within a dynamic component using the injectContext helper or standard Angular inputs.

```typescript
import {injectContext} from '@taiga-ui/polymorpheus';

@Component({
  template: '{{ context.active }}',
})
export class MyComponent {
  protected readonly context = injectContext<{active: boolean}>();
}
```

```typescript
import {input} from '@angular/core';

@Component({
  template: '{{ active() }}',
})
export class MyComponent {
  protected readonly active = input(false);
}
```

--------------------------------

### Context Injection API

Source: https://github.com/taiga-family/polymorpheus/blob/main/README.md

Methods for accessing the provided context within dynamic components rendered by Polymorpheus.

```APIDOC
## [Utility] injectContext

### Description
Helper function to inject the context object into a dynamic component. The context is live, meaning updates to the object will automatically trigger view updates.

### Usage Example
```ts
import {injectContext} from '@taiga-ui/polymorpheus';

@Component({
  template: '{{ context.active }}',
})
export class MyComponent {
  protected readonly context = injectContext<{active: boolean}>();
}
```
```

--------------------------------

### Define template context types

Source: https://github.com/taiga-family/polymorpheus/blob/main/README.md

Illustrates how to enforce type safety on template context using the polymorpheus directive.

```typescript
readonly context!: { $implicit: number };
```

```html
<ng-template
  #template="polymorpheus"
  [polymorpheus]="context"
  let-item
>
  {{ item.toFixed(2) }}
</ng-template>
```

--------------------------------

### Conditional Avatar Display in Razor Syntax

Source: https://github.com/taiga-family/polymorpheus/blob/main/projects/demo/src/app/modules/star-wars/star-wars.template.html

This snippet demonstrates conditional rendering of an avatar or initials in Razor syntax. It checks if an 'item.avatar' exists; if so, it renders the avatar. Otherwise, it displays the initials derived from 'item.name' using the 'getInitials' function, followed by the full 'item.name'.

```Razor
@if (item.avatar) {  } @else {

{{ getInitials(item.name) }}

}

{{ item.name }}
```

--------------------------------

### Implementing Typed Templates with PolymorpheusTemplate

Source: https://context7.com/taiga-family/polymorpheus/llms.txt

Demonstrates how to use the PolymorpheusTemplate directive to provide type safety for template contexts in Angular. It shows both the component definition using the outlet and the parent component providing a typed template.

```typescript
import { Component, signal } from '@angular/core';
import { PolymorpheusOutlet, PolymorpheusTemplate, PolymorpheusContent } from '@taiga-ui/polymorpheus';

interface TableRowContext {
  $implicit: { id: number; name: string; email: string; role: string };
  index: number;
  isEven: boolean;
}

@Component({
  selector: 'app-data-table',
  imports: [PolymorpheusOutlet, PolymorpheusTemplate],
  template: `
    <table>
      <thead>
        <tr><th>ID</th><th>Name</th><th>Email</th><th>Actions</th></tr>
      </thead>
      <tbody>
        @for (row of data; track row.id; let i = $index) {
          <tr [class.even]="i % 2 === 0">
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.email }}</td>
            <td>
              <ng-container
                *polymorpheusOutlet="actionsTemplate() as text; context: {
                  $implicit: row,
                  index: i,
                  isEven: i % 2 === 0
                }"
              >
                {{ text }}
              </ng-container>
            </td>
          </tr>
        }
      </tbody>
    </table>
  `
})
export class DataTableComponent {
  data = [
    { id: 1, name: 'Alice', email: 'alice@example.com', role: 'admin' },
    { id: 2, name: 'Bob', email: 'bob@example.com', role: 'user' }
  ];

  actionsTemplate = signal<PolymorpheusContent<TableRowContext>>(
    ({ $implicit }) => $implicit.role
  );
}

@Component({
  imports: [DataTableComponent, PolymorpheusTemplate],
  template: `
    <app-data-table [actionsTemplate]="customActions" />

    <ng-template
      #customActions="polymorpheus"
      [polymorpheus]="rowContext"
      let-row
      let-index="index"
    >
      <button (click)="edit(row)">Edit</button>
      <button (click)="delete(row.id)">Delete</button>
      <span class="row-number">Row {{ index + 1 }}</span>
    </ng-template>
  `
})
export class TablePageComponent {
  readonly rowContext!: TableRowContext;

  edit(row: TableRowContext['$implicit']): void {
    console.log('Editing:', row);
  }

  delete(id: number): void {
    console.log('Deleting:', id);
  }
}
```

--------------------------------

### polymorpheusOutlet Directive

Source: https://github.com/taiga-family/polymorpheus/blob/main/README.md

The core structural directive used to render polymorphic content within an Angular template.

```APIDOC
## [Directive] *polymorpheusOutlet

### Description
A structural directive that abstracts view customization by rendering content based on provided input (primitives, functions, templates, or components).

### Parameters
#### Inputs
- **polymorpheusOutlet** (any) - Required - The content to render (primitive, function, TemplateRef, or Component).
- **context** (object) - Optional - The context object passed to the rendered content.

### Usage Example
```html
<ng-container *polymorpheusOutlet="content as text; context: context">{{text}}</ng-container>
```
```

--------------------------------

### Conditional Primitive Rendering in Angular Template

Source: https://github.com/taiga-family/polymorpheus/blob/main/projects/demo/src/app/modules/tab/tab.template.html

This snippet demonstrates how to conditionally render content based on whether a primitive value is a number. It uses Angular-style structural directives to check the type and display the value accordingly.

```html
{{ $implicit().text }} @if ($implicit().content) {

@if (isNumber(primitive)) {

{{ primitive }}

} @else {

}

}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.