title: Fill form after http response in angular2
body: <p>I'm wondering what is a best way to load a form after getting the response from server. I wrote some code where it is getting data from server and in my component I am subscribing to the response, but My UI is loading before even I get the response.</p>
  
  <p>I want to use this component for both adding and editing.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>@Component({
  selector: 'gate',
  templateUrl: '/public/app/views/gate.html',
  directives: [GateFormComponent, StrategyComponent],
  providers : [MyService]
  })
  
  export class MyComponent {
  
  private id:any;
  
  constructor(private _routeParams:RouteParams, @Inject(MyModel) private myModel,
              private myService : MyService) {
  }
  
  ngOnInit() {
      this.id = this._routeParams.get("id");
      if (this.id) {
          this.gateDataModel.unique_display_id = parseInt(this.id);
          this.myService.loadData(this.id)
              .subscribe(response =&gt; console.log(response));
      }
  }
  </code></pre>
  
  <p>In my component, I am loading 2 components one of which has a form into which I have to load data once I get the response. And all this should only happen if I have an id available.</p>
  
  <p><strong>Service:</strong></p>
  
  <pre><code>@Injectable()
  export class MyService extends HTTPServices {
  
  constructor(http:Http) {
      super(http);
  }
  
  
  loadData(id:number) {
      return this.query(url)
          .map(res =&gt; res.json())
          .catch(this.handleError)
  }
  
  
  private handleError(error:Response) {
      console.log("Error : ", error);
      return Observable.throw(error.text());
  }
  </code></pre>
  
  <p><strong>HTTPServices</strong></p>
  
  <pre><code>export class HTTPServices {
  
  private headers:Headers;
  private http:Http;
  
  defaultOptionsArgs:RequestOptionsArgs;
  
  constructor(http:Http) {
      this.http = http;
      this.headers = new Headers();
      this.headers.append('Content-Type', 'application/json');
      this.defaultOptionsArgs = {
          'headers': this.headers
      };
  }
  
  
  
  create(servicePath:string, model:any, options?:RequestOptionsArgs) {
      var url = this.getUrl(servicePath);
      var options = options ? options : this.defaultOptionsArgs;
      return this.http.post(url, JSON.stringify(model), options);
  }
  
  query(servicePath:string, options?:RequestOptionsArgs) {
      var options = options ? options : this.defaultOptionsArgs;
      return this.http.get(servicePath, options);
  }
  
  }
  </code></pre>
  
  <p>----Edited-----</p>
  
  <p>Finally, I was able to add <code>@CanActivate</code> and it is working.</p>
  
  <pre><code>@Component({
  selector: 'gate',
  templateUrl: '/public/app/views/gate.html',
  directives: [ROUTER_DIRECTIVES, GateFormComponent, StrategyComponent]
  })
  
  @CanActivate(
  (next: ComponentInstruction, prev: ComponentInstruction) =&gt; {
      return new Promise((resolve) =&gt; {
          let id = next.params["id"];
          let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
          let http = injector.get(Http);
          if(id){
              http.get(URL)
                  .subscribe((response) =&gt; {
                      console.log(response)
                      next.routeData.data["response"] = response;
                      // continue
                      resolve(true);
                  }, (error) =&gt; {
                      resolve(false);
                  });
          } else {
              resolve(true);
          }
      });
  }
  
  )
  
  export class MyComponent{
  
  private id:any;
  
  constructor(private _routeParams:RouteParams, @Inject(MyModel) private myModel, routeData: RouteData) {
     console.log(routeData.get("response"));
  }
  
  }
  </code></pre>
  
  <p>The component is loading up and then I am getting the response</p>
  
  <p>Thanks</p>