Skip to content

Instantly share code, notes, and snippets.

View jhades's full-sized avatar

JhadesDev jhades

554 followers · 13 following
View GitHub Profile
@jhades
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
jhades / test123.js
Created March 30, 2016 14:26
console.log('Hello Gist World!');
@jhades
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
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
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
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
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
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
jhades / core-directives-ng-for.ts
Last active May 12, 2016 07:45
@Component({
selector: 'app',
directives: [Hero, Heroes],
template: `
<heroes>
<hero id="1" name="Superman"></hero>
<hero id="2" name="Batman"></hero>
<hero id="3" name="Batgirl"></hero>
<hero id="3" name="Robin"></hero>
<hero id="4" name="Flash"></hero>
@jhades
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>