Ngx-details - Details native element with Angular

Introduction

Ngx-details is an angular library that makes it easy to use the <details> element. It provides components and directives that make it easy to show or hide content depending on whether or not the <details> element is expanded. This can be useful for displaying additional information about a particular item, or for hiding sensitive information until it is needed.

Key features

The ngx-details library also includes a number of features that make it easy to use with Angular components and directives. These include:

  • Control the expanded state by providing [open] input to the directive.
  • Know if the expanded state change by listening (isOpen) output to the directive.

Installation

Package is available on npm.

npm install --save @ngx-yanis/ngx-details

After installing the package, you have to import NgxDetailsModule On your own module

import { NgxDetailsModule } from '@ngx-yanis/ngx-details';

@NgModule({
  imports: [
    ...
    NgxDetailsModule
  ]
})
export class AnyModule { }

Demo and usage

Is <details> is Open ? No

I am the summary

I am the details of the component.

The ngx-details directive is very easy to use. Just add it to your template, give it some content, and specify which elements should be collapsed:

On your Component, you can use the following code:

@Component()
export class NgxDetailsDemoBasicComponent {
  isOpen = false;
  onOpenChange(isOpen: boolean) {
    this.isOpen = isOpen;
  }
}

On your HTML file you can use the following code:

<details ngxDetails (isOpen)="onOpenChange($event)">
  <summary>I am the summary</summary>
  <p>I am the details of the component.</p>
</details>