Data Directive Implementation

dataDirective.ts

@Directive({
  exportAs: 'nqConnect',
  selector: '[nqConnect]',
})
export class ConnectRequestDirective implements OnInit, OnDestroy {
  // tslint:disable-next-line:no-input-rename
  @Input('nqConnect')
  config: any = <ConnectRequestParams>undefined;
  @Output() response: EventEmitter<any> = new EventEmitter();

  subscription: Subscription;

  constructor(
    // You could replace ConnectService with Http
    private connectService: ConnectService,
    @Optional() public host: NqConnectedComponent
  ) {}

  ngOnInit(): void {
    // Automatically get the latest data when the component loads
    this.subscribe(this.config);
    if (this.host) {
      // Refresh data when the host component forces a refresh
      this.host.nqRefresh.subscribe(() => this.forceRequest());
    }
  }

  ngOnDestroy(): void {
    this.unsubscribe();
  }

  subscribe(config: ConnectRequestParams): void {
    this.unsubscribe();
    this.subscription = this.connectService.requestAsync(config) // or this.http.get(...)
      .subscribe(response => {
        if (this.response) {
          // bind the received response to the host component
          if (this.host) {
            this.host.nqData = response;
          }
          // emit the response data
          this.response.emit(response);
        }
      });
  }

  unsubscribe(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  forceRequest(): void {
    this.subscribe(Object.assign({}, this.config, { force: true }));
  }
}