open-index/open-npm huggingface dataset:
npm package: @ngx-adv/accordion
Description: `@ngx-adv/accordion` is an Angular library that provides accordion functionality for your Angular applications. It includes three main components: `AccordionComponent`, `AccordionTabComponent`, and `AccordionTabHeaderComponent`.
Latest version: 1.0.0

## **Accordion Component Guide**

`@ngx-adv/accordion` is an Angular library that provides accordion functionality for your Angular applications. It includes three main components: `AccordionComponent`, `AccordionTabComponent`, and `AccordionTabHeaderComponent`.

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Contributions](#contributions)

## **Features**

- **Accordion Component**

  - Toggle multiple tabs open or closed.
  - Highlight the active tab.
  - Customizable animations.

- **Accordion Tab Component**

  - Enable or disable individual tabs.
  - Hide the toggle icon for specific tabs.
  - Events for tab open and close actions.

- **Accordion Tab Header Component**
  - Render the header for accordion tabs.
  - Easily customize the header content.
  -

## **Installation**

1. Install the `@ngx-adv/accordion` package using npm:

```bash
npm install --save @ngx-adv/accordion
```

2. Import the Accordion component styles into your Angular application's stylesheet:

```css
@import '@ngx-adv/theme/assets/scss/components/accordion';
```

<br />

## **Usage**

3. In your component TypeScript file, import the necessary classes:

```typescript
import {
  AccordionComponent,
  AccordionTabComponent,
  AccordionTabHeaderComponent,
} from '@ngx-adv/accordion';

@Component({
  selector: 'app-accordion-page',
  imports: [AccordionComponent, AccordionTabComponent, AccordionTabHeaderComponent
})
export class BadgePageComponent {
}
```

4. In your component's HTML template, use the `ngx-adv-accordion` Selector:

```html
<ngx-adv-accordion #accordion class="d-block mb-3" [highlightActiveTab]="true">
  <ngx-adv-accordion-tab disabled="true">
    <ngx-adv-accordion-tab-header> Profile </ngx-adv-accordion-tab-header>
    <span class="d-block px-3 py-2">Label 1</span>
  </ngx-adv-accordion-tab>
</ngx-adv-accordion>
```

## **Contributions**

Contributions for the `@ngx-adv/accordion` package are made by [Mohamed Elserety](https://www.linkedin.com/in/elserety/). If you have any specific questions or need further assistance with this package, please reach out to your team for support.
npm package: @ngx-adv/animations
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# animations

This library was generated with [Nx](https://nx.dev).

## Running unit tests

Run `nx test animations` to execute the unit tests.
npm package: @ngx-adv/dialog
Description: The `@ngx-adv/dialog` is a powerful tool for Angular that allows you to easily create and manage dialogs in your web applications. It provides a seamless way to display(Text, TemplateRef, Component) with various customization options.
Latest version: 1.0.0

## **Dialog Component Guide**

The `@ngx-adv/dialog` is a powerful tool for Angular that allows you to easily create and manage dialogs in your web applications. It provides a seamless way to display(Text, TemplateRef, Component) with various customization options.

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Contributions](#contributions)

## **Features**

- **Display Text**: Allow the dialog to display simple text messages.

- **TemplateRef**: Support the use of Angular `TemplateRef` to render custom content within the dialog.

- **Components**: Support rendering Angular components within the dialog for more complex and interactive content.

- **Header Component**: Include a header component with the following features:

  - Title: Display a title for the dialog.
  - Close Button: Include a close button to allow users to close the dialog.

- **Dialog Body**: A container for the main content of the dialog. It should be flexible enough to accommodate text, TemplateRefs, or components.

- **Dialog Footer**: Include a footer section to place action buttons or additional content.

- **Generic Types**: Provide support for generic types to handle transferred data and response data. This allows users to specify the data structure they expect when opening and closing dialogs.

## **Installation**

1. Install the `@ngx-adv/badge` package using npm:

```bash
npm install --save @ngx-adv/dialog
```

2. Import the Dialog component styles into your Angular application's stylesheet:

```css
@import '@ngx-adv/theme/assets/scss/components/dialog';
```

## **Usage**

3. In your component TypeScript file, import the necessary classes:

```typescript
import { Component } from '@angular/core';
import { DialogService } from '@ngx-adv/dialog';
import { MyCustomDialogComponent } from './my-custom-dialog.component';

@Component({
  selector: 'app-my-component',
  template: ` <button (click)="openDialog()">Open Dialog</button> `,
})
export class MyComponent {
  constructor(private dialogService: DialogService) {}

  openDialog() {
    this.dialogService.open(
      MyCustomDialogComponent, // Your custom dialog component
      {
        width: '400px', // Customize the width
        data: {
          /* Any data you want to pass to the dialog component */
        },
      },
    );
  }
}
```

## **Contributions**

Contributions for the `@ngx-adv/dialog` package are made by [Mohamed Elserety](https://www.linkedin.com/in/elserety/). If you have any specific questions or need further assistance with this package, please reach out to your team for support.