ng2-completer remote data with custom header is not working

Question

I am trying to use ng2-completer in Angular5. However I am not able to post custom header with it. I am trying to replicate this

My HTML code is as followed:

<ng2-completer [inputClass]="{'form-control': true, 'has-error': !Name.valid && Name.touched}"
                               [(ngModel)]="searchStr"
                               [datasource]="dataService"
                               formControlName="Name"
                               [minSearchLength]="3"
                               autoMatch="true"
                               clearUnselected="true"></ng2-completer>

my component is as follows:

protected searchStr: string;
headers: any;
protected dataService: RemoteData;`




constructor(private completerService: CompleterService, private url: UrlService) {
        this.headers = new Headers();
        const options = new RequestOptions({ headers: this.headers });
        options.headers.set('Content-Type', 'application/json');
        options.headers.set('Authorization', 'xxx');
        this.dataService = completerService.remote(url.data_url, 'name', 'name');
        this.dataRemote.requestOptions(options);

}

This one is not sending my auth token. Please any one can help me? Thanks

Answer 1

Try do this in your component:

constructor(private completerService: CompleterService, private url: UrlService) {
        this.dataService = completerService.remote(url.data_url, 'name', 'name');
        let options = new RequestOptions({headers: new Headers()});
        options.headers.set('Authorization','xxx');
        options.headers.set('Content-Type', 'application/json');
        this.dataRemote.requestOptions(options);
}

This implementation works for me!!