1.0.3 • Published 7 years ago

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

Weekly downloads
-
License
-
Repository
-
Last release
7 years ago

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
ParameterDescription
formGroup (required)A form group to keep in-sync with any URL changes
activatedRoute (required)The injected instance of ActivatedRoute to listen for param changes on
destroySubject (optional)A subject the UrlSyncer will listen to for when to stop syncing changes. Typically this is a subject you would emit to in your component's ngOnDestroy

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

destroy()

Stop listening for any form / URL changes.

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago