step2

2union · Dec 25, 2016 · f9149a0 · f9149a0
1 parent 3a4e9cb
commit f9149a0
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 64 deletions.
diff --git a/_index.html b/_index.html
diff --git a/app/core/module.ts b/app/core/module.ts
@@ -2,10 +2,11 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { HelloComponent }  from '../tasks/hello.component';
+import { ListComponent }   from '../tasks/list.component';
 
 @NgModule({
   imports:      [ BrowserModule ],
-  declarations: [ HelloComponent ],
-  bootstrap:    [ HelloComponent ]
+  declarations: [ HelloComponent, ListComponent ],
+  bootstrap:    [ ListComponent ]
 })
 export class NyModule { }
diff --git a/app/tasks/list.component.ts b/app/tasks/list.component.ts
@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'list',
+  templateUrl: './app/templates/list.html',
+})
+export class ListComponent  {
+  persons: Object[] = [
+    {
+      "id"  : 1,
+      "name": 'Ms. Jackson'
+    },
+    {
+      "id"  : 2,
+      "name": 'Mr. Philips'
+    },
+    {
+      "id"  : 3,
+      "name": 'Cusine Susy'
+    },
+    {
+      "id"  : 4,
+      "name": 'Antonio'
+    },
+    {
+      "id"  : 5,
+      "name": 'Carl'
+    },
+    {
+      "id"  : 6,
+      "name": 'Lisa'
+    }
+  ];
+
+  lastId: number = 6;
+
+  add(name: string = '') {
+    this.lastId++;
+    let person: Object = {
+      "id": this.lastId,
+      "name": name
+    };
+    this.persons.push(person);
+    return false;
+  }
+
+  delete(person: Object = null) {
+    let index = this.persons.indexOf(person);
+
+    if ( index > -1 ) {
+      this.persons.splice(index, 1);
+    }
+  }
+}
diff --git a/app/templates/list.html b/app/templates/list.html
@@ -0,0 +1,15 @@
+<!--ADD LOVED ONES FORM START-->
+  <div class="mailchimp">
+      <form action="" method="post">
+
+              <input type="text" value="" name="fname" id="list-add-fname" placeholder="Enter the Name" required #personInput>
+              <input type="submit" value="Add" name="add" id="list-add-btn" class="btn btn-inverse" (click)=add(personInput.value)>
+      </form>
+  </div><!--ADD LOVED ONES FORM END-->
+
+<div class="loved-list">
+    <div class="row" *ngFor="let item of persons">
+        <div class="col-md-10 col-lg-10">{{ item.name }}</div>
+        <div class="col-md-1 col-lg-1"><i class="material-icons" (click)="delete(item)">delete</i></div>
+    </div>
+</div>
diff --git a/index.html b/index.html
@@ -36,6 +36,18 @@
         <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
         <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
 </head>
 
 <body>
@@ -105,41 +117,7 @@ <h2>Write here your congratulations to <span class="highlight">Cusine Susy</span
             <h2>List of loved ones</h2>
         </div><!--SECTIONHEAD END-->
 
-        <!--ADD LOVED ONES FORM START-->
-        <div class="mailchimp">
-            <form action="" method="post">
-
-                    <input type="text" value="" name="fname" id="list-add-fname" placeholder="Enter the Name" required>
-                    <input type="submit" value="Add" name="add" id="list-add-btn" class="btn btn-inverse">
-            </form>
-        </div><!--ADD LOVED ONES FORM END-->
-
-        <div class="loved-list">
-            <div class="row">
-                <div class="col-md-10 col-lg-10">Ms. Jackson</div>
-                <div class="col-md-1 col-lg-1"><i class="material-icons">delete</i></div>
-            </div>
-            <div class="row">
-                <div class="col-md-10 col-lg-10">Mr. Philips</div>
-                <div class="col-md-1 col-lg-1"><i class="material-icons">delete</i></div>
-            </div>
-            <div class="row">
-                <div class="col-md-10 col-lg-10">Cusine Susy</div>
-                <div class="col-md-1 col-lg-1"><i class="material-icons">delete</i></div>
-            </div>
-            <div class="row">
-                <div class="col-md-10 col-lg-10">Antonio</div>
-                <div class="col-md-1 col-lg-1"><i class="material-icons">delete</i></div>
-            </div>
-            <div class="row">
-                <div class="col-md-10 col-lg-10">Carl</div>
-                <div class="col-md-1 col-lg-1"><i class="material-icons">delete</i></div>
-            </div>
-            <div class="row">
-                <div class="col-md-10 col-lg-10">Lisa</div>
-                <div class="col-md-1 col-lg-1"><i class="material-icons">delete</i></div>
-            </div>
-        </div>
+        <list>List loading...</list>
     </div>
     <div id="overview" class="container clear"></div>