Add search bar in header

src/app/header/header.component.html

@@ -35,8 +35,14 @@
 
       </div>
 
-      <div fxFlex="50px">
-        <!-- Search input -->
+      <div>
+
+        <mat-form-field appearance="fill">
+          <mat-label>Fill form field</mat-label>
+          <input matInput placeholder="Placeholder">
+          <mat-icon matSuffix>search</mat-icon>
+        </mat-form-field>
+
       </div>
 
     </div>

src/app/header/header.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { AuthService } from  '@app/core/services/auth/auth.service';
+import { AuthService } from '@app/core/services/auth/auth.service';
 
 @Component( {
   selector: 'app-header',
@@ -8,7 +8,7 @@ import { AuthService } from  '@app/core/services/auth/auth.service';
 } )
 export class HeaderComponent implements OnInit {
 
-  constructor(private  authService:  AuthService) {
+  constructor( private authService: AuthService ) {
   }
 
   ngOnInit() {

src/styles.css

@@ -26,3 +26,27 @@ app-header .mat-fab .mat-button-wrapper {
   width: 100%;
   min-height: 80%;
 }
+
+.mat-form-field.mat-focused .mat-form-field-ripple {
+  background-color: #078171;
+}
+
+.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
+  background-color: #b0bec5;
+}
+
+.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {
+  background-color: #f44336;
+}
+
+.mat-form-field.mat-focused .mat-form-field-label {
+  color: #078171
+}
+
+.mat-form-field.mat-focused .mat-form-field-label.mat-accent {
+  color: #b0bec5
+}
+
+.mat-form-field.mat-focused .mat-form-field-label.mat-warn {
+  color: #f44336
+}