Skip to content

Angular structural directives for fp-ts types (Option, Either).

License

Notifications You must be signed in to change notification settings

wmaurer/ngx-fp-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ngx-fp-ts

Angular structural directives for fp-ts types (Option, Either).

Install

    npm install ngx-fp-ts

Usage

Import the NgxFpTsModule module and add it to the imports of your module:

    import { NgxFpTsModule } from 'ngx-fp-ts';

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

Alternatively, you can import individual directives and add them to the declarations of your module:

    import { IfSome} from 'ngx-fp-ts';

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

ifSome

Conditionally includes a template based on whether an Option variable is Some or not.

The inline, then and else templates work in the same manner as ngIf.

The encapsulated value of the Option (when Some) can be stored in a local variable.

    <div *ifSome="o; else oNoneTemplate; let v">
        o value is {{ v }}
    </div>
    <ng-template #oNoneTemplate>
        o is none
    </ng-teplate>

ifNone

Conditionally includes a template based on whether an Option variable is Some or not.

The inline, then and else templates work in the same manner as ngIf.

The encapsulated value of the Option (when Some) can be stored in a local variable.

    <div *ifNone="o; else oNoneTemplate">
        o value is none
    </div>
    <ng-template #oNoneTemplate let-v>
        o value is {{ v }}
    </ng-teplate>

ifLeft

Conditionally includes a template based on whether an Either variable is Left or Right.

The inline, then and else templates work in the same manner as ngIf.

The encapsulated value of the Either variable can be stored in a local variable.

    <div *ifLeft="e; else eLeftTemplate; let v">
        e is left, value is {{ v }}
    </div>
    <ng-template #eRightTemplate let-v>
        e is right, value is {{ v }}
    </ng-teplate>

ifRight

Conditionally includes a template based on whether an Either variable is Right or Left.

The inline, then and else templates work in the same manner as ngIf.

The encapsulated value of the Either variable can be stored in a local variable.

    <div *ifRight="e; else eRightTemplate; let v">
        e is right, value is {{ v }}
    </div>
    <ng-template #eLeftTemplate let-v>
        e is left, value is {{ v }}
    </ng-teplate>

Thanks

Special thanks to Giulio Canti for the fantastic fp-ts library.

Releases

No releases published

Packages

No packages published