@searchkings/ngx-url-form-sync v1.0.3

URL Form Syncer

Usage

In your component class:

@Component({
  selector: 'component-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnDestroy, OnInit {
  public dateForm: FormGroup;
  private urlFormSync: UrlFormSyncer;
  private onDestroy$: Subject<void> = new Subject<void>();

  constructor(
    private activatedRoute: ActivatedRoute,
    private formBuilder: FormBuilder,
    private urlFormSyncService: UrlFormSyncService
  ) {}

  ngOnInit() {
    /**
    *  Some form values you would like to keep in sync with the URL params
    **/
    this.dateForm = this.formBuilder.group({
      grouping: ['accounts'],
      date_range: ['last_30_days']
    });

    /**
    *  Create a new instance of UrlFormSyncer
    **/
    this.urlFormSync = this.urlFormSyncService.create(
      this.dateForm,
      this.activatedRoute,
      this.onDestroy$
    );

    /**
    *  Use formValues$ observable to listen for changes and
    *  perform some arbitrary action
    **/
    this.urlFormSync.formValues$
      .pipe(takeUntil(this.onDestroy$))
      .subscribe(values => {
        // Perform some action (e.g. an http request) with the new values
      });
  }

  ngOnDestroy() {
    this.onDestroy$.next();
    this.onDestroy$.complete();
  }
}

API

UrlFormSyncService

create(formGroup: FormGroup, activatedRoute: ActivatedRoute, destroySubject?: Subject\<any>)

Create a new UrlFormSyncer.

Returns

• instance of UrlFormSyncer

create(formGroup: FormGroup, activatedRoute: ActivatedRoute, destroySubject?: Subject\): UrlFormSyncer

destroy()

Stop listening for any form / URL changes.