right alignment of icon in add-article

src/app/components/add-article-form/add-article-form.component.css

@@ -16,6 +16,22 @@
   margin: 4em 2em 4em 2em;
 }
 
+.header-panel{
+  display: flex;
+  flex-direction: row;
+  grid-gap: 2em;
+  justify-content: center;
+  align-content: center;
+}
+.header-panel h2{
+  margin: 0;
+  padding: 0;
+}
+
+.header-panel mat-icon{
+  align-self: center;
+}
+
 /*
 ::ng-deep .mat-panel-title {
   text-align: center;

src/app/components/add-article-form/add-article-form.component.html

@@ -1,7 +1,8 @@
 <mat-expansion-panel [expanded]="false" (opened)="formOpened" hideToggle id="add-expansion-panel">
   <mat-expansion-panel-header>
-    <mat-panel-title>
-      <strong>Add Article</strong> <mat-icon aria-hidden="false" aria-label="Add an article">add_circle_outline</mat-icon>
+    <mat-panel-title class="header-panel">
+      <h2>Add Article</h2>
+      <mat-icon aria-hidden="false" aria-label="Add an article">add_circle_outline</mat-icon>
     </mat-panel-title>
     </mat-expansion-panel-header>
   <div id="add-article-container">

src/app/components/article/articles-list.component.css

@@ -1,9 +1,6 @@
 #articles-container{
   height: 100%;
   overflow: auto;
-  /*display: flex;*/
-  /*align-items: center;*/
-  /*justify-content: center;*/
 }
 
 .article-element{

src/app/components/article/articles-list.component.ts

@@ -1,7 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Article} from "../../shared/models/article";
-import {articles} from "../../hcData/data";
-import {Client} from "../../shared/models/client";
 
 @Component({
   selector: 'app-articles-list',

src/app/components/bill-creation/bill-creation.component.css

@@ -10,7 +10,7 @@ mat-expansion-panel{
 
 .client-list{
   height: 400px;
-  background-color: lightblue;
+  /*background-color: lightblue;*/
 }
 
 .confirm-bill{

src/app/components/bill-creation/bill-creation.component.html

@@ -50,11 +50,11 @@
 
     <mat-action-row>
       <button mat-button color="warn" (click)="prevStep()">Previous</button>
-      <button mat-button color="primary" (click)="nextStep()">Next</button>
+      <button mat-button [disabled]="!clientSelected || !articlesSelected || date.value === null" color="primary" (click)="saveBill()">Save</button>
       <div>
         <mat-form-field appearance="fill">
           <mat-label>Choose a date</mat-label>
-          <input matInput [matDatepicker]="picker">
+          <input matInput [matDatepicker]="picker" [value]="date.value">
           <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
           <mat-datepicker #picker></mat-datepicker>
         </mat-form-field>

src/app/components/bill-creation/bill-creation.component.ts

@@ -5,6 +5,7 @@ import {Article} from "../../shared/models/article";
 import {auditTime} from "rxjs/operators";
 import {ArticlesServiceService} from "../../services/articles-service.service";
 import {ClientService} from "../../services/client.service";
+import {FormControl} from "@angular/forms";
 
 @Component({
   selector: 'app-bill-creation',
@@ -21,21 +22,16 @@ export class BillCreationComponent implements OnInit {
 
   articlesSelected:boolean = false;
   clientSelected:boolean = false;
+  date = new FormControl(new Date());
 
   constructor(
     private _ArticleService: ArticlesServiceService,
     private _ClientService: ClientService,
   ) { }
 
   ngOnInit() {
-    console.log("getting client and articles from billCreation")
     this.clients = this._ClientService.getClients();
     this.articles = this._ArticleService.getArticles();
-    console.log("Articles")
-
-    console.log(this.articles);
-    console.log("Clients")
-    console.log(this.clients);
   }
 
   setBillClient(client:Client){
@@ -55,7 +51,6 @@ export class BillCreationComponent implements OnInit {
     this.articlesSelected = this.bill.articles.length > 0;
   }
 
-
   setStep(index: number) {
     this.step = index;
   }
@@ -68,4 +63,8 @@ export class BillCreationComponent implements OnInit {
     this.step--;
   }
 
+  saveBill(){
+    //do here an api call to save the bill in the backend
+  }
+
 }