TypeScript icon, indicating that this package has built-in type declarations

6.0.0 • Public • Published

npm MIT Commitizen friendly PRs styled with prettier All Contributors ngneat spectator

Overview - The Template for Success in Template Management

Compatibility with Angular Versions

@ngneat/overview Angular
5.x >= 16
4.x >= 14 < 16
3.x >= 13 < 14
2.x >= 11 < 13


npm i @ngneat/overview
yarn add @ngneat/overview

Table of Contents


Use the dynamicView structural directive to render a component, a template, HTML, or default template dynamically.

Let’s say we build a generic error component. What we want is to give our consumers the flexibly to create it by using one of three options:

  • They can choose to use the default template
  • They can choose to use their own text which can be static or dynamic
  • They can choose to pass their own template or component
import { DynamicViewModule, Content } from '@ngneat/overview';

  template: `
    <div *dynamicView="view">
      Default view
  standalone: true,
  imports: [DynamicViewModule]
export class ErrorComponent {
  @Input() view: Content | undefined;

You can also pass a context or an injector as inputs to the directive:

<ng-container *dynamicView="component; 
    injector: myInjector; 
    context: { $implicit: 'my title' }"/>

<ng-template #tpl let-title>
  <b>{{ title }}</b>

<ng-container *dynamicView="tpl; context: { $implicit: 'my title' }"/>

If you pass context to a component and the value can be accessed via the injectViewContext function:

import { injectViewContext } from '@ngneat/overview';

interface Context {
  title: string;

  template: `<div>{{ context().title }}</div>`,
  standalone: true
export class MyDynamicComponent {
    context: Signal<Context> = injectViewContext<Context>();

injectViewContext returns a readonly signal with the view's context object.


Teleporting means rendering a view at a different location from its declaration. There are two cases it might be helpful:

  • Avoid prop drilling to a nested component.
  • Rendering a view at another place in the DOM while keeping its context where it’s defined.

You can read more about this approach in this article.

Use the teleportOutlet directive to define a new outlet. An outlet is an anchor where the view will be projected as a sibling.

import { TeleportModule } from '@ngneat/overview';

  template: `
    <div class="flex">
      <ng-container teleportOutlet="someId"/>
  standalone: true,
  imports: [TeleportModule]
export class FooComponent {}

Use the teleportTo directive to teleport the view to a specific outlet:

import { TeleportModule } from '@ngneat/overview';

  template: `
   <section *teleportTo="someId">
      {{ value }}
  standalone: true,
  imports: [TeleportModule]
export class BarComponent {
  value = '...'


The ViewService provides facade methods to create modular views in Angular. It's been used in various projects like hot-toast, and helipopper.


The createComponent method takes a Component, and returns an instance of CompRef:

import { ViewService, CompRef } from '@ngneat/overview';

class ToastService {
  private viewService = inject(ViewService);
  componentRef: CompRef;

  init() {
   this.componentRef = this.viewService
      .setInput('defaultConfig', defaultConfig)

There are cases where we want to use an Angular component template in a third-party library that takes a native DOM element or a string. In this case, we can use the getRawContent or the getElement method, respectively.

import {ViewService} from '@ngneat/overview';

class ChartDirective {
    private viewService = inject(ViewService);

    createChart(color: string) {
        const ref = this.viewService
            .setInput('color', color)

        const content = ref.getRawContent();


        Highcharts.chart('container', {
            tooltip: {
                formatter: function () {
                    return content;
                useHTML: true

createComponent Options

createComponent<Comp, Context>(component: Type<Comp>, {
  injector?: Injector,
  environmentInjector?: EnvironmentInjector,
  context?: Context,
  vcr?: ViewContainerRef,


The createTemplate method takes a TemplateRef, and returns an instance of ViewRef.

createTemplate<Context>(tpl: TemplateRef<Context>, {
  context?: Context,
  vcr?: ViewContainerRef,
  injector?: Injector,


The createView method takes a Component, a TemplateRef or a string, and creates a View:

import { ViewService, Content } from '@ngneat/overview';

class ToastService {
  private viewService = inject(ViewService);

  createToast(content: Content) {
    const ref = this.viewService.createView(content);

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Netanel Basal

💻 🤔

Dharmen Shah

🖋 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Icons made by Freepik from www.flaticon.com

Package Sidebar


npm i @ngneat/overview

Weekly Downloads






Unpacked Size

114 kB

Total Files


Last publish


  • netanel-ngneat
  • itayod
  • shahar.kazaz