import { ActivatedRoute } from '@angular/router' ; import { Component , OnInit , ChangeDetectionStrategy } from '@angular/core' ; import { Observable } from 'rxjs' ; import { select , Store } from '@ngrx/store' ; import { tap , filter , map , switchMap , shareReplay , combineLatest } from 'rxjs/operators' ; import { briebugLoading , currentBriebug , briebugError } from '@state/briebug' ; import { Briebug } from '@state/briebug/briebug.model' ; import { LoadBriebugById , CreateBriebug , UpdateBriebug , SelectBriebugById } from '@state/briebug/briebug.actions' ; import { BriebugState } from '@state/briebug/briebug.reducer' ; @ Component ( { templateUrl : './entity.component.html' , styleUrls : [ './entity.component.css' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class BriebugComponent implements OnInit { briebug$ = this . activatedRoute . paramMap . pipe ( combineLatest ( this . activatedRoute . url ) , filter ( ( [ params , url ] ) => params . has ( 'id' ) || url [ 0 ] . path === 'add' ) , map ( ( [ params ] ) => params . get ( 'id' ) ) , tap ( ( id ) => { const BriebugAction = id ? LoadBriebugById : SelectBriebugById ; this . store . dispatch ( new BriebugAction ( { id : + id || null } ) ) ; } ) , switchMap ( ( ) => this . store . pipe ( select ( currentBriebug ) ) ) , map ( ( briebug ) => ( { ... briebug } ) ) ) ; errorMessage$ = this . store . pipe ( select ( briebugError ) , shareReplay ( ) ) ; isLoading$ = this . store . pipe ( select ( briebugLoading ) , shareReplay ( ) ) ; briebugEdits : Briebug ; showFormErrors : boolean ; valid : boolean ; constructor ( private activatedRoute , private store ) { } ngOnInit ( ) { this . showFormErrors = false ; } onBriebugChanged ( { briebug , valid } ) { this . briebugEdits = briebug ; this . valid = valid ; } onSubmit ( ) { this . showFormErrors = true ; if ( ! this . valid ) { return ; } const BriebugAction = this . briebugEdits . id ? UpdateBriebug : CreateBriebug ; this . store . dispatch ( new BriebugAction ( { briebug : this . briebugEdits } ) ) ; } }