File

packages/components/directives/eui-template.directive.ts

Description

Directive for defining named template references that can be dynamically rendered. Provides a way to identify and retrieve templates by name for content projection. Commonly used in components that accept multiple template slots (headers, footers, custom content). Works with TemplateRef to enable flexible content customization.

<ng-template euiTemplate="header">
  <h2>Custom Header</h2>
</ng-template>

<ng-template euiTemplate="footer">
  <button>Custom Action</button>
</ng-template>

In component:

@ContentChildren(EuiTemplateDirective) templates: QueryList<EuiTemplateDirective>;

getTemplate(name: string) {
  return this.templates.find(t => t.getType() === name)?.template;
}

Accessibility

• Template content should follow accessibility guidelines
• Ensure dynamic content maintains proper heading hierarchy
• Screen readers will announce template content when rendered

Notes

• Use euiTemplate input to assign template name
• Templates retrieved via ContentChildren query in parent component
• getType() method returns template name for identification
• Supports generic typing for template context