How to retrieve certain data from URL in Angular 2.0

I'm presuming your url endpoint returns JSON and your attempting to use the returned data to populate your input value.

Firstly import the HttpClientModule in your module dependencies:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then from within your foo.component.ts you can inject an instance of HttpClient in the constructor.

constructor(private http: HttpClient){
  }

Then you can use said HttpClient instance http like so:

this.http.get('https://example.com/?username1=Dr&Organization=Pepper&action=create').subscribe(data => {
      console.log(data);
    });
  }

This can then be put into a property (myProp) which can be referenced like so:

<input *ngIf="myProp" type="text" name="varname" value="myProp">

Note that we use *ngIF to make sure that our property isn't loaded until myProp is not null or undefined.

Main App component - app-root

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  name = null;


  constructor(private http: HttpClient){
  }

  ngOnInit(): void {
    this.http.get('https://example.com/?username1=Dr&Organization=Pepper&action=create').subscribe(data => {
    // data = result: {name: 'Derek da Doctor'}
      this.name = data.result.name;
    });
  }
}

app.component.html

<input *ngIf="name" type="text" name="varname" value="{{name}}">