dipi v8.2.0

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

Default value

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

Custom value

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

Stackblitz

safe | safe

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

filter | filter

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

searchFilter | searchFilter

Directives

debounce [debounce]

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

lazyFor *lazyFor

offsetHeight offsetHeight

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