Dipi

A simple Angular library that contain a huge, useful pack of Directives and Pipes for Angular developers.

Quick Start

1. Install Dipi library:

$ npm i dipi -D

2. Import DipiModule inside your Angular module:

....
import { DipiModule } from 'dipi';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DipiModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Documentation

Website documentation is in development.

Pipes

---

join | join

<details> <summary>Example</summary> <p>

Default value

  <p>{{ textList | join }}</p> <!-- Dipi,is,working! -->

Custom value

    <p>{{ textList | join: ' ' }}</p> <!-- Dipi is working! -->

Stackblitz

</p> </details>

safe | safe

<details> <summary>Example</summary> <p>

Default value: url. Possible values: 'html' | 'css' | 'js' | 'url' | 'res-url'

Default value

  <iframe [src]="'https://www.w3schools.com' | safe"></iframe>

Custom value

  <p [style]="'color: red' | safe: 'style'">Red text</p>

Stackblitz

</p> </details>

filter | filter

<details> <summary>Example</summary> <p>

Default value

  textList = [
    {
      name: 'Dipi',
      available: true,
    },{
      name: 'is',
      available: true,
    },{
      name: 'working!',
      available: true,
    },{
      name: 'Hide me',
      available: false
    }
  ]

  <p>
    <ng-container *ngFor="let node of textList | filter">
      <span>{{ node.name }} </span>
    </ng-container>
  </p>

Custom value

  <p>
    <ng-container *ngFor="let node of textList | filter : 'name'">
      <span>{{ node.name }} </span>
    </ng-container>
  </p>

Stackblitz

</p> </details>

searchFilter | searchFilter

<details> <summary>Example</summary> <p>

  search = 'Dipi';

  textList = [
    {
      name: 'Dipi',
      available: true,
    },{
      name: 'is',
      available: true,
    },{
      name: 'working!',
      available: true,
    },{
      name: 'Hide me',
      available: false
    }
  ]

  <p>
    <ng-container *ngFor="let node of textList | searchFilter: search">
      <span>{{ node.name }} </span>
    </ng-container>
  </p>

Stackblitz

</p> </details>

Directives

---

debounce [debounce]

<details> <summary>Example</summary> <p>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  search = '';

  textList = [
    {
      name: 'Dipi',
      available: true,
    },{
      name: 'is',
      available: true,
    },{
      name: 'working!',
      available: true,
    },{
      name: 'Hide me',
      available: false
    }
  ]

  filteredList: any[];

  constructor() {
    this.filteredList = this.textList;
  }

  filterSearch(): void {
    this.filteredList = this.textList.filter((e: any) => e.name.includes(this.search));
  }
}

Default value

<h2>Dipi Seed</h2>
<input type="search"
       [debounce]
       [(ngModel)]="search"
       (debouceEvent)="filterSearch()">
<p>
  <ng-container *ngFor="let node of filteredList">
    <span>
     {{ node.name }}
    </span>
  </ng-container>
</p>

Custom value

<h2>Dipi Seed</h2>
  <input type="search"
         [debounce]="2000"
         [(ngModel)]="search"
         (debouceEvent)="filterSearch()">
  <p>
    <ng-container *ngFor="let node of filteredList">
      <span>
       {{ node.name }}
      </span>
    </ng-container>
  </p>

Stackblitz

</p> </details>

lazyFor *lazyFor

<details> <summary>Example</summary> <p>

List of items

  textList = [
    {
      name: 'Dipi',
      available: true,
    },{
      name: 'is',
      available: true,
    },{
      name: 'working!',
      available: true,
    },{
      name: 'Hide me',
      available: false
    },{
      name: 'Foo',
      available: false
    },{
      name: 'Bar',
      available: false
    },{
      name: 'Buz',
      available: false
    }
  ]

Component css

  ul {
    height: 100px;
    overflow-y: auto;
  }
  
  ul li {
    min-height: 35px;
  }

Directive usage

  <ul>
    <li *lazyFor="let k of textList">
      {{ k.name }}
    </li>
  </ul>

Stackblitz

</p> </details>

offsetHeight offsetHeight

<details> <summary>Example</summary> <p>

 <h2>
  Dipi
 </h2>
 <div offsetHeight>
   Block
 </div>

Stackblitz

</p> </details>

In Development

1. Pipes: | distinct | formatter | timer

2. Directives:

3. Website documentation

Help

I will be so glad if you will create an issue with your own useful Directive or Pipe that will be used by other Angular developers . Knowledge sharing is our strength!

Contributing

Please read contributing guidelines here.

License

MIT