open-index/open-npm huggingface dataset:
npm package: @manthanankolekar/custom-directives
Description: A collection of custom Angular directives.
Latest version: 0.0.5

# Custom Directives Library

This is a library of custom Angular directives that mimic common built-in Angular directives such as `NgIf`, `NgFor`, `NgClass`, etc.

## Installation

Install via npm:

```bash
npm install @manthanankolekar/custom-directives
```

## Usage

Import in your `app.component.ts`:

```typescript
import { Component } from '@angular/core';

import { CustomIfDirective, CustomForDirective, CustomSwitchDirective, CustomSwitchCaseDirective, CustomClassDirective, CustomStyleDirective, CustomModelDirective } from '@manthanankolekar/custom-directives';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CustomIfDirective,
    CustomForDirective,
    CustomSwitchDirective,
    CustomSwitchCaseDirective,
    CustomClassDirective,
    CustomStyleDirective,
    CustomModelDirective,
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'custom-directives';
}
```

## Directives

### CustomIfDirective

The `CustomIfDirective` is a structural directive that conditionally includes a template based on the value of an expression.

```html
<p *appCustomIf="isVisible">This is conditionally visible based on isVisible.</p>
```

### CustomForDirective

The `CustomForDirective` is a structural directive that repeats a template for each item in a collection.

```html
<ul>
    <li *appCustomFor="let item of items; index as i">Index: {{ i }} - Item: {{ item }}</li>
</ul>
```

### CustomSwitchDirective

The `CustomSwitchDirective` is a structural directive that conditionally includes a template based on the value of an expression.

```html
<div [appCustomSwitch]="currentView">
    <ng-template appCustomSwitchCase="view1">View 1 Content</ng-template>
    <ng-template appCustomSwitchCase="view2">View 2 Content</ng-template>
</div>
```

### CustomStyleDirective

The `CustomStyleDirective` is an attribute directive that adds styles to an element.

```html
<div [appCustomClass]="{ 'active': isActive, 'hidden': !isActive }">
    This element has dynamic classes.
</div>
```

### CustomClassDirective

The `CustomClassDirective` is an attribute directive that adds classes to an element.

```html
<div [appCustomStyle]="{ 'color': textColor, 'font-size': fontSize }">
    This element has dynamic styles.
</div>
```

### CustomModelDirective

The `CustomModelDirective` is a two-way binding directive that binds a property to an input element.

```html
<input [appCustomModel]="userInput" (appCustomModelChange)="userInput = $event">
```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @manthanankolekar/ng-icons
Description: Angular Icons
Latest version: 0.0.2

# NgIcons

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.

![npm](https://img.shields.io/npm/dw/@manthanankolekar/ng-icons)
![npm](https://img.shields.io/npm/dm/@manthanankolekar/ng-icons)
![npm](https://img.shields.io/npm/dy/@manthanankolekar/ng-icons)
![npm](https://img.shields.io/npm/dt/@manthanankolekar/ng-icons)

## Installation

```bash
npm install @manthanankolekar/ng-icons
```

## Usage

Import

```typescript
import { Component } from '@angular/core';

import { NgIconsComponent } from '@manthanankolekar/ng-icons';

@Component({
   selector: 'app-root',
   imports: [
      NgIconsComponent
   ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'ng-icons';
}
```

Use

```html
<ng-icons name="home" [size]="32" color="blue"></ng-icons>
```

## Demo

[Stackblitz](https://stackblitz.com/edit/ng-icons-example)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
npm package: @manthanankolekar/ng-loader
Description: A loader for Angular applications
Latest version: 0.0.7

# NgLoader

This is a simple Angular loader library.

![npm](https://img.shields.io/npm/dw/@manthanankolekar/ng-loader)
![npm](https://img.shields.io/npm/dm/@manthanankolekar/ng-loader)
![npm](https://img.shields.io/npm/dy/@manthanankolekar/ng-loader)
![npm](https://img.shields.io/npm/dt/@manthanankolekar/ng-loader)

## Installation

```bash
npm install @manthanankolekar/ng-loader
```

## Usage

Import

```typescript
import { Component } from '@angular/core';

import { NgLoaderComponent } from '@manthanankolekar/ng-loader';

@Component({
  selector: 'app-root',
  imports: [
    NgLoaderComponent
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-loader';
}
```

Use

```html
<ng-loader [loading]="isLoading" [loaderMessage]="loaderMessage"></ng-loader>
```

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  isLoading = false;
  loaderMessage = 'Loading, please wait...';

  toggleLoader() {
    this.isLoading = true;
    // Optionally update the loader message here.
    setTimeout(() => {
      this.isLoading = false;
    }, 3000);
  }
}
```

## Demo

[Stackblitz](https://stackblitz.com/edit/ng-loader-example)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
npm package: @manthanankolekar/ng-markdown
Description: A simple Angular markdown rendering library.
Latest version: 0.0.6

# NgMarkdown

![npm](https://img.shields.io/npm/dw/@manthanankolekar/ng-markdown)
![npm](https://img.shields.io/npm/dm/@manthanankolekar/ng-markdown)
![npm](https://img.shields.io/npm/dy/@manthanankolekar/ng-markdown)
![npm](https://img.shields.io/npm/dt/@manthanankolekar/ng-markdown)

A simple Angular library for rendering markdown with syntax highlighting.

## Installation

```bash
npm install @manthanankolekar/ng-markdown
```

## Usage

Import the component:

```typescript
import { Component } from '@angular/core';
import { NgMarkdown } from '@manthanankolekar/ng-markdown';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgMarkdown],
  template: `
    <div class="markdown-container">
      <ng-markdown [data]="markdownText"></ng-markdown>
    </div>
    <button (click)="toggleMarkdown()" class="toggle-btn">Toggle Markdown</button>
  `,
  styles: `
    .markdown-container {
      padding: 1.5rem;
      background: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      max-width: 42rem;
      margin: 2rem auto;
    }

    .toggle-btn {
      display: block;
      margin: 1rem auto 0 auto;
      padding: 0.5rem 1.5rem;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      border: none;
      border-radius: 0.375rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .toggle-btn:hover, .toggle-btn:focus {
      background: #1d4ed8;
      outline: none;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.3);
    }
  `
})
export class AppComponent {
  markdownText = '# Hello, Markdown!\n\n```ts\nconsole.log("Hello World");\n```';

  toggleMarkdown() {
    this.markdownText = this.markdownText.includes('Hello')
      ? '# Updated Markdown!\n\n- List item 1\n- List item 2'
      : '# Hello, Markdown!\n\n```ts\nconsole.log("Hello World");\n```';
  }
}
```

Use in your template:

```html
<ng-markdown [data]="markdownText"></ng-markdown>
```

## Demo

[Stackblitz Example](https://stackblitz.com/edit/ng-markdown-example)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
npm package: @manthanankolekar/ng-pagination
Description: A simple pagination component for Angular
Latest version: 0.0.4

# Ng Pagination

This is a simple pagination library for Angular applications.

![npm](https://img.shields.io/npm/dw/@manthanankolekar/ng-pagination)
![npm](https://img.shields.io/npm/dm/@manthanankolekar/ng-pagination)
![npm](https://img.shields.io/npm/dy/@manthanankolekar/ng-pagination)
![npm](https://img.shields.io/npm/dt/@manthanankolekar/ng-pagination)

## Installation

To install this library, run:

```bash
npm install @manthanankolekar/ng-pagination
```

## Usage

Import in your `app.component.ts`:

```typescript
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgPaginationComponent } from '../../../ng-pagination/src/lib/ng-pagination.component';

interface Item {
  id: number;
  title: string;
  description: string;
}

@Component({
  selector: 'app-root',
  imports: [NgPaginationComponent, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  title = 'Pagination Example';
  items: Item[] = [];
  displayedItems: Item[] = [];
  
  totalItems = 100;
  itemsPerPage = 10;
  currentPage = 1;

  ngOnInit() {
    // Generate dummy data
    this.items = Array.from({ length: this.totalItems }, (_, i) => ({
      id: i + 1,
      title: `Item ${i + 1}`,
      description: `Description for item ${i + 1}`
    }));
    
    this.updateDisplayedItems();
  }

  onPageChange(page: number) {
    this.currentPage = page;
    this.updateDisplayedItems();
  }

  onItemsPerPageChange(itemsPerPage: number) {
    this.itemsPerPage = itemsPerPage;
    this.updateDisplayedItems();
  }

  private updateDisplayedItems() {
    const startIndex = (this.currentPage - 1) * this.itemsPerPage;
    const endIndex = startIndex + this.itemsPerPage;
    this.displayedItems = this.items.slice(startIndex, endIndex);
  }
}
```

Add the following to your `app.component.html`:

```html
  <ng-pagination 
    [totalItems]="totalItems" 
    [itemsPerPage]="itemsPerPage" 
    [currentPage]="currentPage" 
    [itemsPerPageOptions]="[5, 10, 20, 50]"
    (pageChange)="onPageChange($event)"
    (itemsPerPageChange)="onItemsPerPageChange($event)">
  </ng-pagination>
```

## Demo

[StackBlitz](https://stackblitz.com/edit/ng-pagination)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.