RLH-14 - Implement Button component

src/app/libraries/components/button/button.component.html

@@ -1,7 +1,7 @@
 <button
   type="button"
-  class="btn btn-link"
+  class="m-1 {{classes}}"
-  [disabled]="buttonDisabled()"
+  [disabled]="isDisabled()"
   (click)="button.click()">
-    {{button.text}}
+  {{ button.text }}
 </button>

src/app/libraries/components/button/button.component.ts

@@ -1,5 +1,5 @@
-import {booleanAttribute, Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
-import {ButtonModel} from "./models/button.model";
+import {ButtonModel, ButtonType} from "./models/button.model";
 
 @Component({
   selector: 'rlh-button',
@@ -14,12 +14,12 @@ export class ButtonComponent implements OnInit
   @Input() button: ButtonModel = {
     text: 'text',
     disabled: () => false,
-    click: () => {}
+    click: () => {},
+    type: ButtonType.PRIMARY
   };
 
-  buttonDisabled: () => boolean = () => {
+  isDisabled: () => boolean = () => {
     return false;
-    // tslint:disable-next-line: semicolon
   };
 
   ngOnInit() {
@@ -28,12 +28,19 @@ export class ButtonComponent implements OnInit
       : () => false;
     //
     setTimeout(() => {
-      this.buttonDisabled = () => {
+      this.isDisabled = () => {
         return this.button.disabled();
       };
     });
   }
 
+    get classes(): string {
+      let classes = 'btn';
+        classes += ' ' + (this.button.type ? this.button.type : ButtonType.PRIMARY);
+
+      return classes;
+    }
+
 
 
 

src/app/libraries/components/button/models/button.model.ts

@@ -1,5 +1,11 @@
 export class ButtonModel {
   text: string = "text";
+  type: ButtonType;
   disabled: () => boolean;
   click: () => void;
 }
+
+export enum ButtonType {
+  LINK = "btn-link",
+  PRIMARY = "btn-primary",
+}