techeverri/app\app.component.css

## app\app.component.css
.github-avatar {
  font-family: Roboto, sans-serif;
}
.header {
  background-color: #2196F3;
  padding: 15px;
  color: white;
}
.user-search {
float: right;
}
.user-detail {
  width: 150px;
  background-color: #03A9F4;
  margin: 0 auto;
  margin-top: 15px;
}
.user-detail img {
  width: 200px;
}
.user-detail div {
background-color: white;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
padding: 15px;
}
.card {
  background: #fff;
  border-radius: 2px;
  display: block;
  height: 200px;
  position: relative;
  width: 200px;
}
.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

## app\app.component.html
<div class="github-avatar">
  <div class="header">
      <i class="fa fa-github fa-lg"></i>
      Angular 2 GitHub Avatar
      <span class="user-search">
        <input [(ngModel)]="username" placeholder="User" (keyup)="doGetUser(username)">
        <i class="fa fa-search"></i>
      </span>
  </div>
  <div *ngIf="user" class="user-detail card card-3">
      <img *ngIf="user" src="{{ user.avatar_url }}">
      <div>
          <span *ngIf="user.name">{{ user.name }}</span>
          <br>
          <a [href]="'https://github.com/' + user.login" target="_blank">{{ '@' + user.login }}</a>
      </div>
  </div>
</div>

## app\app.component.ts
import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';

@Component({
    selector: "github-avatar",
    viewProviders: [HTTP_PROVIDERS],
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css']
})
export class AppComponent implements OnInit {
    public urlAPI = 'https://api.github.com/users/';
    public clientId = '6c628481062a08230920';
    public clientSecret = '5a84e99c8bfcc7d299c390c60dd635af84da73a2';
    public username: string = 'torvalds';
    public user: any;

    constructor(public http: Http) { }

    doGetUser(username: string) {
        var url = `${this.urlAPI}${username}?client_id=${this.clientId}&client_secret=${this.clientSecret}`;
        this.http
            .get(url)
            .map(res => res.json())
            .subscribe(
              data  => this.user = data,
              err => this.user = undefined
            );

    }

    ngOnInit() {
      this.doGetUser(this.username);
    }

}

## app\main.ts
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

## config.js
System.config({
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      }
    }
});

## index.html
<html>
<head>
    <title>Angular 2 GitHub Avatar</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style type="text/css"> body {margin: 0px;} </style>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/Rx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/angular2.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/http.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.import('app')
            .catch(console.error.bind(console));
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <github-avatar>Loading...</github-avatar>
</body>
</html>
	.github-avatar {
	font-family: Roboto, sans-serif;
	}
	.header {
	background-color: #2196F3;
	padding: 15px;
	color: white;
	}
	.user-search {
	float: right;
	}
	.user-detail {
	width: 150px;
	background-color: #03A9F4;
	margin: 0 auto;
	margin-top: 15px;
	}
	.user-detail img {
	width: 200px;
	}
	.user-detail div {
	background-color: white;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	padding: 15px;
	}
	.card {
	background: #fff;
	border-radius: 2px;
	display: block;
	height: 200px;
	position: relative;
	width: 200px;
	}
	.card-3 {
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	}
	<div class="github-avatar">
	<div class="header">
	<i class="fa fa-github fa-lg"></i>
	Angular 2 GitHub Avatar
	<span class="user-search">
	<input [(ngModel)]="username" placeholder="User" (keyup)="doGetUser(username)">
	<i class="fa fa-search"></i>
	</span>
	</div>
	<div *ngIf="user" class="user-detail card card-3">
	<img *ngIf="user" src="{{ user.avatar_url }}">
	<div>
	<span *ngIf="user.name">{{ user.name }}</span>
	<br>
	<a [href]="'https://github.com/' + user.login" target="_blank">{{ '@' + user.login }}</a>
	</div>
	</div>
	</div>
	import {Component} from 'angular2/core';
	import {Http, HTTP_PROVIDERS} from 'angular2/http';
	import 'rxjs/add/operator/map';

	@Component({
	selector: "github-avatar",
	viewProviders: [HTTP_PROVIDERS],
	templateUrl: 'app/app.component.html',
	styleUrls: ['app/app.component.css']
	})
	export class AppComponent implements OnInit {
	public urlAPI = 'https://api.github.com/users/';
	public clientId = '6c628481062a08230920';
	public clientSecret = '5a84e99c8bfcc7d299c390c60dd635af84da73a2';
	public username: string = 'torvalds';
	public user: any;

	constructor(public http: Http) { }

	doGetUser(username: string) {
	var url = `${this.urlAPI}${username}?client_id=${this.clientId}&client_secret=${this.clientSecret}`;
	this.http
	.get(url)
	.map(res => res.json())
	.subscribe(
	data => this.user = data,
	err => this.user = undefined
	);

	}

	ngOnInit() {
	this.doGetUser(this.username);
	}

	}
	import {bootstrap} from 'angular2/platform/browser'
	import {AppComponent} from './app.component'

	bootstrap(AppComponent);
	System.config({
	transpiler: 'typescript',
	typescriptOptions: {
	emitDecoratorMetadata: true
	},
	packages: {
	app: {
	main: './main.ts',
	defaultExtension: 'ts'
	}
	}
	});
	<html>
	<head>
	<title>Angular 2 GitHub Avatar</title>
	<script>document.write('<base href="' + document.location + '" />');</script>
	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<style type="text/css"> body {margin: 0px;} </style>

	<!-- 1. Load libraries -->
	<!-- IE required polyfills, in this exact order -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/angular2-polyfills.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.js"></script>
	<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
	<script src="config.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/Rx.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/angular2.dev.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.2/http.dev.js"></script>

	<!-- 2. Configure SystemJS -->
	<script>
	System.import('app')
	.catch(console.error.bind(console));
	</script>
	</head>
	<!-- 3. Display the application -->
	<body>
	<github-avatar>Loading...</github-avatar>
	</body>
	</html>