established the frontend for search functionality

stackle-app/src/app/secure/secure.component.html

@@ -24,9 +24,9 @@ <h5 class="mat-h5">By Opensource, For Opensource</h5>
       <div class="example-container">
         <form>
           <mat-form-field>
-            <input matInput placeholder="Stack Name">
+            <input matInput placeholder="Stack Name" [(ngModel)]="stackNameToSearch" name="stackNameText">
           </mat-form-field>
-          <button mat-button color="primary" type="submit">
+          <button mat-button color="primary" type="submit" (click)="onSearchSubmit()">
             <mat-icon matListIcon>search</mat-icon>
             Search
           </button>

stackle-app/src/app/secure/secure.component.ts

@@ -14,6 +14,8 @@ export class SecureComponent implements OnInit {
 
   private subscribedStacks = [];
   private userAvatarUrl;
+  public stackNameToSearch: String;
+  public stackInfo: any;
 
   constructor(
     private auth: AuthService,
@@ -59,4 +61,19 @@ export class SecureComponent implements OnInit {
     this.router.navigate(['app/stack'], { queryParams: { name: stackName }});
   }
 
+  public onSearchSubmit(){
+    let stackToSearch = {
+      stackName: this.stackNameToSearch
+    };
+    console.log(stackToSearch);
+    this.stackService.getStack(stackToSearch.stackName).subscribe((res)=>{
+      console.log(res);
+      if(res.success){
+        this.stackInfo = res.result;
+      }
+    }, (err)=>{
+      console.log(err);
+    });
+  }
+
 }

stackle-app/src/app/services/stack.service.ts

@@ -67,4 +67,9 @@ export class StackService {
 
   }
 
+  public getStack(stackName){
+    return this.http.get(`${this.apiUrl}/api/org/name/${stackName}`)
+      .map((res: Response) => res.json())
+      .catch((error: any) => Observable.throw(error.json().error) || 'Server error');
+  }
 }