title: Add Custom Header in Http Request using ngx-restangular in Angular 4
body: <p>I am using <a href="https://github.com/2muchcoffeecom/ngx-restangular/" rel="nofollow noreferrer">ngx-restangular</a> for http requests in Angular 4. I have to set up a custom header at some event taking some input from user and after that the Token is created which is to be passed to the <code>Requestheader</code> in the <strong>API</strong>.</p>
  
  <p>Here is the code which I have used for  setting the custom header.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import { RestangularModule, Restangular, RestangularHttp } from 'ngx-restangular';
  import { RestangularConfigFactory } from '../app.module';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { AppComponent } from '../app.component';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Http, Headers, Response, RequestOptions,  } from '@angular/http';
  
  
  @Component({
      templateUrl: 'login.component.html'
  })
  
  export class LoginComponent implements OnInit {
      model: any = {};
      loading = false;
      returnUrl: string;
      headers: Headers;
      options: RequestOptions;
  
      constructor(
          private route: ActivatedRoute,
          private router: Router,
          private restangular: Restangular) { }
  
      ngOnInit() {
          // reset login status
          // get return url from route parameters or default to '/'
          this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
      }
  
      login() {
          this.loading = true;
          this.headers = new Headers();
          this.headers.append('Content-Type', 'application/json');
          this.headers.append('Authorization', 'Basic ' + btoa(this.model.username + ':' + this.model.password));
          this.options = new RequestOptions({ headers: this.headers });
          console.log(this.options);
          this.restangular.one('authentication').one('user').get([''], [this.headers]).subscribe( response =&gt; {
              console.log(response);
            });
      }
  }
  </code></pre>
  
  <p>now using this I am getting the Output<a href="https://i.stack.imgur.com/4mfHD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4mfHD.png" alt="ActualImage"></a>
  and I need something like this <a href="https://i.stack.imgur.com/F7cSR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F7cSR.png" alt="DesiredImage"></a></p>
  
  <p>In the <strong>desired image</strong> image below you can see the in the <code>Request Header</code> a new field named <code>authorization</code> is there which I want to achieve using <code>ngx-restangular</code>.</p>
  
  <p>Any help is appreciated.</p>