Angular structural directives for fp-ts types (Option, Either).
npm install ngx-fp-ts
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 {}
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>
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>
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>
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>
Special thanks to Giulio Canti for the fantastic fp-ts library.