Added custom alert button

nerdic-coder · nerdic-coder · commit e6372c30305f · 2017-08-27T18:17:36.000+03:00
diff --git a/src/components/button-alert.tsx b/src/components/button-alert.tsx
@@ -0,0 +1,26 @@
+import { Component, Prop } from '@stencil/core';
+
+@Component({
+    tag: 'button-alert'
+})
+
+export class Button {
+
+    @Prop() buttonText: string;
+    @Prop() alertMessage: string;
+
+    handleClick(event: UIEvent) {
+        console.log(event);
+        if (this.alertMessage) {
+            alert(this.alertMessage);
+        }
+    }
+
+    render() {
+        if(this.buttonText) {
+            return (
+                <button onClick={(event: UIEvent) => this.handleClick(event)}>{this.buttonText}</button>
+            );
+        }
+    }
+}
diff --git a/src/components/my-first-component.tsx b/src/components/my-first-component.tsx
@@ -4,7 +4,7 @@ import { Component, Prop } from '@stencil/core';
   tag: 'my-first-component'
 })
 
-export class MyComponent {
+export class MyFirstComponent {
   // Indicate that name should be a public property on the component
   @Prop() firstName: string;
 
diff --git a/src/components/todo-list.tsx b/src/components/todo-list.tsx
@@ -4,7 +4,7 @@ import { Component } from '@stencil/core';
   tag: 'todo-list'
 })
 
-export class TodosComponent {
+export class TodoList {
   // Indicate that name should be a public property on the component
   todos = [
     {taskName:"Task 1", isCompleted:true}, 
diff --git a/src/index.html b/src/index.html
@@ -7,10 +7,10 @@
   <script src="build/app.js"></script>
 </head>
 <body>
-
-  <my-name first="Stencil" last="JS"></my-name>
-  <my-first-component first-name="Max"></my-first-component>
-  <my-name></my-name>
-  <todo-list></todo-list>
+    <my-name first="Stencil" last="JS"></my-name>
+    <my-first-component first-name="Max"></my-first-component>
+    <my-name></my-name>
+    <todo-list></todo-list>
+    <button-alert button-text="Show me the money!" alert-message="The money!"></button-alert>
 </body>
 </html>
diff --git a/stencil.config.js b/stencil.config.js
@@ -1,6 +1,6 @@
 exports.config = {
   bundles: [
-    { components: ['my-name', 'my-first-component', 'todo-list'] }
+    { components: ['my-name', 'my-first-component', 'todo-list', 'button-alert'] }
   ],
   collections: [
     { name: '@stencil/router' }
