Vasco Cavalheiro jhades

Founder of the Angular University, and OnlineCourseHost.com

jhades / hello_world.ts

Last active March 9, 2016 12:49

test-hello-world

	import {Component} from 'angular2/core';
	import {bootstrap} from 'angular2/platform/browser';

	@Component({
	selector: 'hello-world',
	template: `<input placeholder="Type Hello World !"
	(keyup)="hello(input.value)" #input> {{message}}`
	})
	export class HelloWorld {

jhades / test123.js

Created March 30, 2016 14:26

console.log('Hello Gist World!');

jhades / hello_world.ts

Created May 12, 2016 06:53

	@Component({
	selector: 'hello-world',
	template: `<input #input (keydown)="updateModel(input.value)">{{model.message}}`
	})
	export class HelloWorld {

	model = {
	message: 'Hello World !'
	};

jhades / index.html

Created May 12, 2016 06:54

	<!DOCTYPE html>
	<html>
	<head>
	<title>Really Understanding Angular 2 - The Fundamentals</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
	<link href="//fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700" rel="stylesheet" type="text/css">
	<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="https://angular-academy.s3-us-west-1.amazonaws.com/styles/angular-academy-lessons-theme-v1.css">

jhades / template-syntax-properties.ts

Last active May 12, 2016 07:02


	@Component({
	selector: 'app',
	template: `

	<div class="color-sample" [style.background]="'red'">
	Color Sample</div>

	<button [disabled]="true">Disabled</button>

jhades / template-syntax-interpolation.ts

Last active May 12, 2016 07:15

	import {Component} from "@angular/core";
	import {bootstrap} from "@angular/platform-browser-dynamic";


	@Component({
	selector: 'app',
	template: `
	<label>Message:</label>{{ model?.message }}
	`
	})

jhades / template-syntax-events.ts

Last active May 12, 2016 07:27

	@Component({
	selector: 'app',
	template: `
	<input value="Hello World !" #input>{{input.value}}
	<button (click)="onClick()">Click Me</button>
	`
	})
	export class App {

	onClick() {

jhades / color-picker.ts

Last active May 12, 2016 07:39

Components Essentials

	@Component({
	selector: 'color-picker',
	template: `

	<div class="color-title" [ngStyle]="{color:color}">Pick a Color:</div>

	<div class="color-picker">
	<div class="color-sample color-sample-blue" (click)="choose('${BLUE}')"></div>
	<div class="color-sample color-sample-red" (click)="choose('${RED}')"></div>
	</div>

jhades / core-directives-ng-for.ts

Last active May 12, 2016 07:45

jhades / core-directives-ngstyle-ngclass.ts

Created May 12, 2016 07:48

Angular 2 Core Directives NgStyle and NgClass

	@Component({
	selector: 'app',
	directives: [Hero, Heroes],
	template: `
	<heroes>
	<hero id="1" name="Superman"></hero>
	<hero id="2" [name]="'Batman'"></hero>
	<hero id="3" [name]="'Spiderman'" marvel="true"></hero>
	<hero id="4" name="Batgirl"></hero>
	<hero id="3" name="Hulk" marvel="true"></hero>