into-pipes v2.1.1

Welcome to InTo Pipes!

Have you ever wanted to transform values in different parts of your application into interactive objects without writing a single line of code? This library provides few Angular pipes that are all used by a single InTo pipe component/directive. InTo will determine how the object value should be formatted based on meta-data formatting rules!! Moreover, "InTo" can be customized by adding custom formatters into it!!

Note: If you decide to use the InTo pipes instead of the directive, you need to make sure you will pipe the result into sanitizeHtml. Note: When you create tags and insert them into DOM at runtime through InTo Pipes, angular will not be able to enforce CSS rules on the tags. In that case the workaround is to use ::ng-deep in your CSS. For example, if img tage is created through image pipe under a DIV with class "something", then you need to declare attributes in ::ng-deep .something img{ } in order to have control over img tag. Note: Starting from version 2.0.0, this library is compatible with Angular 6+.

NOTE: Starting with version 2.1.1 you need to import this library through @sedeh/into-pipes.

You are definitely welcome to submit additional pipes and formatting rules to this library and I will gladly incorporate your ideas InTo this project. Add your comments an requests through the link provided below.

Live Demo | Source code | Comments/Requests

Features

• Responsive
• Formats your data to interactive component
• ADA Compliant

Dependencies and Components

MODULE:
    IntoPipeModule

EXPORTS
    JoinPipe
    InToPipe
    ImagePipe
    VideoPipe
    LinkPipe
    MaskPipe
    MapPipe
    PrependPipe
    AppendPipe
    WrapPipe
    ValueOfPipe
    EmailPipe
    RatingPipe
    FontPipe
    ConditionalPipe
    AddressPipe
    SanitizeHtmlPipe

    IntoDirective
    ComponentPool

    AddressComponent
    EmailComponent
    FontComponent
    ImageComponent
    VideoComponent
    JsonComponent
    LinkComponent
    InputComponent
    CheckboxComponent
    RatingComponent
    SelectComponent
    SpanComponent
    ShareComponent
    LikeComponent
    LastUpdateComponent
	
DEPENDENCIES: 
    "font-awesome": "^4.7.0"

Interfaces

export interface PipeComponent {
	source: any;
	id: string;
	name: string;
	service?:PipeServiceComponent;
	onIntoComponentChange: EventEmitter<any>;
	  
	transform(content: any, data: any, args?: any[]);
}

export interface PipeServiceComponent {
	getDataFor(name, id, data);
}

Module, Pipes, Components, and Directive

NOTE: 
    In the Conditional pipe:
        "~" is for exist (check to see if transforming object exist and item 2 is ignored).
        "~=" is for equal ignore case.
        "!~" is for do not exist (check to see if transforming object is null or undefined exist and item 2 is ignored).
        "!=" is to evaluate if transforming object is not equal to value.
        "in" is to get indexof value in the transforming object

Usage Examples

NOTE: For all of the pipes, if transforming object is an array, all elements in the array will be transformed and the resulting array will be returned. in case of conditional pipe, a resulting map will be returned.

Sample usage of directives

	<td scope="row" 
        [intoName]="SSN"
        [intoId]="'ssn-' + i"
        [into]="input:mask"
        [intoData]="{x:'something',y:'whatever'}"
        [rawContent]="item.ssn"
        [onComponentChange]="onTableCellEdit.bind(this)"></td>

Sample registration for select pipe

	// You will have to make sure to add your custom service in NgModel of your 
	// application under providers.
	constructor(private pool: ComponentPool, private myService: MySelectService) {
		this.pool.registerServiceForComponent("select", myService);
	}

Sample creating a Custom pipe

import { Component, Output, EventEmitter } from '@angular/core';
import { PipeComponent } from 'into-pipes';

@Component({
    selector: 'my-custom-component',
    template: `html tags for custom component here`,
    styles: [
        `css classes for custom component here
        `
    ]
})
export class MyCustomInputComponent implements PipeComponent {
    source: string;
    name: string;
    id: string;

    @Output("onIntoComponentChange")
    onIntoComponentChange = new EventEmitter();

    transform(source: any, data: any, args: any[]) {
        this.source = source;
        // do some other stuff here...
    }
    onSomeKindOfEvent(event) {
        this.source = event.target.value;
        this.onIntoComponentChange.emit({
        id: this.id,
        name: this.name,
        value: this.source
        });
    }
}

// Registering my custom component. You will have to make sure 
// to add your custom component in NgModel of your application 
// under declarations and entryComponents.

import { ComponentPool } from 'into-pipes';

my component definition ....

constructor(private pool:ComponentPool) {
    this.pool.registerComponent("input", MyCustomInputComponent);
}

Custom component registration API

	registerComponent (name, component: any)
	removeComponent (name)
	registeredComponent(name): any

	registerServiceForComponent (name, service: any)
	removeServiceForComponent (name)
	registeredServiceForComponent(name): any

Revision History

NOTE: Attributes passed in represented image above are defined as:

  threeFive = 3.5;
  myJson= {q:3,w:43,dw:6565};
  myDate = "2018-03-10T01:01:20Z";
  myDateList = ["2018-03-10T01:01:20Z", "2011-02-12T01:01:20Z"];
  myDateFormat="date:\"MM/dd/yyyy hh:ss\"";
  theURL = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?h=350&auto=compress&cs=tinysrgb";

  myConditionalLogic = "if:=:masoud:\"font:fa fa-check:left:*\":\"font:fa fa-bell:left:*\"";
  myConditionalThreeFive = "if:>:3:\"font:fa fa-check:replace\":\"font:fa fa-bell:replace\"";

  myaddress = {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  };

How to include font-awesome in your project?

In your project root folder, find and open the file 'angular-cli.json' in any editor Locate the styles[] array and add font-awesome references directory. like:

"apps": 
	[
        {
            ....
            "styles": [
              "../node_modules/font-awesome/css/font-awesome.css"
              "styles.css"
            ],
            ...
        }
    ]