add remove components

src/Components/BasicComponent/basic.component.css

@@ -1,6 +0,0 @@
-.flex-fill{
-    border:5px solid white;
-    height: 300px;
-    width: 300px;
-    background-color: lightgray;
-}

src/Components/BasicComponent/basic.component.html

@@ -1,3 +1,6 @@
-<div class="d-flex text-center align-items-stretch bg-light" style="height: 300px;">
+<div class="d-flex flex-wrap" style="height: 300px;">
     <div *ngFor="let item of sharedService.flexItems" [innerHTML]="item"></div>
+
 </div>
+
+

src/Components/headerComponent/header.component.html

@@ -1,3 +1,4 @@
-<div class="d-flex flex-row-reverse">
-    <button (click)="onButtonClick()">...</button>
-</div>
+<div class="flex-wrap d-flex flex-row-reverse">
+    <button (click)="removeComponent()">Del</button>
+    <button (click)="addComponent()">Add</button>
+</div>

src/Components/headerComponent/header.component.ts

@@ -12,7 +12,10 @@ export class HeaderComponent{
 
   constructor(public sharedService: SharedService) {}
 
-  onButtonClick() {
+  addComponent() {
     this.sharedService.addItem();
   }
+  removeComponent() {
+    this.sharedService.removeItem();
+  }
 }

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { BasicComponent } from '../Components/BasicComponent/basic.component';
-import { HeaderComponent } from "../Components/headerComponent/header.component";
+import { HeaderComponent } from "../Components/HeaderComponent/header.component";
 
 @Component({
   selector: 'app-root',

src/app/shared.service.ts

@@ -19,14 +19,21 @@ export class SharedService {
   }
 
   addItem() {
-    if(this.flexItems.length <= 4){
       const newItem = this.sanitizeHtml(`<div 
         style="
-        height: 100%;
+        height: 300px;
         width:330px;
-        margin-left:1.5em;
+        flex: 1 1 330px;
+        margin: 10px;
         background:darkgrey;">Flex item ${this.flexItems.length}</div>`);
-      this.flexItems.push(newItem); 
+        this.flexItems.push(newItem);     
+  }
+  removeItem(){
+    if(this.flexItems.length > 1){
+      this.flexItems.splice(this.flexItems.length -1,1);
+    }
+    if(this.flexItems.length === 1){
+      this.flexItems.splice(this.flexItems.length,1);
     }
   }
 }