ngx-rx-if
An implementation of conditional reactive directive based on @ngrx/store (Redux) [Angular 4.3.1 compatible].
Installation
npm install ngx-rx-if --save
import { RxIfModule } from 'ngx-rx-if'; @NgModule({ imports: [ ..., RxIfModule.forRoot(), ]})
Demo
- Based on angular-cli
- npm run build -- -prod
Usage
<button (click)="load()">Load permissions</button> <ng-container *rxIf="{ bindTo: 'permissions.values.4487', elseMsgCmp: messageCmp, elseMsgCmpCtx: { view: 'View1', permission: '4487' } }"> <div> View1 </div></ng-container> <ng-container *rxIf="{ bindTo: 'permissions.values.4489', elseMsg: 'The view «View2» is not accessible because user has no 4489 permission.' }"> <div> View2 </div></ng-container>
...@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { ... messageCmp = PermissionElseMessageComponent; load(): void { this.permissionService.loadPermissions(); }}
...@Injectable()export class PermissionEffects { ... @Effect() loadPermissionsEffect = this.actions .ofType(PermissionService.PERMISSIONS_LOAD) .switchMap(_ => this.loadPermissions() .mergeMap((permissions: IAppPermissions) => ([ { type: PermissionService.PERMISSIONS_APPLY, payload: permissions }, { type: PermissionService.PERMISSIONS_CLEAR_BY_DELAY } ])) ); @Effect() clearPermissionsByDelayEffect = this.actions .ofType(PermissionService.PERMISSIONS_CLEAR_BY_DELAY) .switchMap(_ => this.clearPermissionsByDelay() .map(_ => ({ type: PermissionService.PERMISSIONS_CLEAR })) ); private loadPermissions(): Observable<IAppPermissions> { return Observable.of({ 4487: true, 4488: false, 4489: true }).delay(1000); } private clearPermissionsByDelay(): Observable<boolean> { return Observable.of(true).delay(3000); }}
@Injectable()export class PermissionService { ... loadPermissions(): void { this.store.dispatch({ type: PermissionService.PERMISSIONS_LOAD }); }}
export function permissionReducer(state = DEFAULT_STATE, action: Action): IAppPermissionState { switch (action.type) { case PermissionService.PERMISSIONS_APPLY: return { ...state, values: action.payload }; case PermissionService.PERMISSION_APPLY: return { ...state, values: { ...state.values, [action.payload.permission]: action.payload.hasPermission } }; case PermissionService.PERMISSIONS_CLEAR: return { ...state, values: null }; default: return state; }}
Preview
License
Licensed under MIT.