Angular 2: Difference between revisions

Angular 2 (view source)

1,199 bytes added , 4 April 2016

add interaction

4,500

edits

@@ Line 89: / Line 89: @@
 bootstrap(HelloWorld);
+</syntaxhighlight>
+adding interaction
+<syntaxhighlight lang="javascript">
+/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
+/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
+import {bootstrap} from "angular2/platform/browser";
+import {Component} from "angular2/core";
+@Component({
+    selector: 'trainer',
+    template: `
+<form class="ui large form segment">
+    <h3 class="ui header">Add a Resource</h3>
+    <div class="field">
+        <label for="title">Title:</label>
+        <input type="text" name="title" #newtitle>
+    </div>
+    <div class="field">
+        <label for="link">Link:</label>
+        <input type="url" name="link" #newlink>
+    </div>
+    <div class="field">
+        <label for="credit">Credit:</label>
+        <input type="number" name="credit" #newcredit>
+    </div>
+    <button (click)="addArticle(newtitle,newlink)" class="ui positive right floated button">Submit resource</button>
+</form>
+`
+})
+class TrainerApp {
+    constructor() {
+    }
+    addResource(title: HTMLInputElement, link: HTMLInputElement): void {
+        console.log(`Adding article title: ${title.value} and link: ${link.value}`);
+    }
+}
+bootstrap(TrainerApp);
 </syntaxhighlight>