@olop/ng-attach

Angular directive to detach and cache elements from the DOM when not displayed and reattach them when displayed again

Usage no npm install needed!

<script type="module">
  import olopNgAttach from 'https://cdn.skypack.dev/@olop/ng-attach';
</script>

README

Attach

The Angular library attach provides the structural directive AttachDirective that detaches and caches elements from the DOM when not displayed and reattaches them when displayed again.

Summary

Installation

npm install --save @olop/ng-attach

Import AttachModule

my.module.ts

import { NgModule } from "@angular/core";
import { AttachModule } from "@olop/ng-attach";

@NgModule({
  imports: [AttachModule],
})
export class MyModule {}

Usage

my.component.ts

import { Component } from "@angular/core";

interface Item {
  id: string;
  label: string;
  content: string;
}

@Component({
  templateUrl: "./my.component.html",
  styles: [
    `
      .scrollable-content {
        width: 200px;
        height: 100px;
        overflow: auto;
      }
    `,
  ],
})
export class MyComponent {
  public items: Item[] = [
    {
      id: "gear",
      label: "Gear",
      content: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos iusto laborum dolore quam neque! Enim impedit, a cupiditate dignissimos commodi minima eius perferendis accusamus nihil soluta aspernatur iure culpa? Quisquam!`,
    },
    {
      id: "video",
      label: "Video",
      content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque sed quisquam veritatis, iure nobis voluptatum, distinctio eum veniam iusto maiores vero soluta ab voluptas minima quas eius consequuntur aliquid. Delectus!`,
    },
  ];

  public itemActive: number = this.items[0];

  constructor() {}

  public activeItem(item: Item): void {
    this.itemActive = item;
  }
}

my.component.html

<nav>
  <button *ngFor="let item of items" (click)="activeItem(item)">
    Navigate to {{ item.label }}
  </button>
</nav>

<ng-container *ngFor="let item of items">
  <div class="scrollable-content" *pvoAttach="itemActive === item">
    {{ item.content }}
  </div>
</ng-container>