added header button to add component

src/Components/BasicComponent/basic.component.css

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

src/Components/BasicComponent/basic.component.html

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

src/Components/BasicComponent/basic.component.ts

@@ -1,11 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';  // Import CommonModule for *ngFor
+import { SharedService } from '../../app/shared.service';
 
 @Component({
-    selector: 'basic-component',
-    standalone: true,
-    templateUrl: './basic.component.html',
-    styleUrl: './basic.component.css',
-  })
-export class BasicComponent{
-
+  selector: 'basic-component',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './basic.component.html',
+  styleUrls: ['./basic.component.css'],
+})
+export class BasicComponent {
+  constructor(public sharedService: SharedService) {}
 }

src/Components/headerComponent/header.component.css

@@ -0,0 +1,8 @@
+.d-flex{
+    background-color: antiquewhite;
+}
+.flex-row-reverse{
+    padding-right: 1em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}

src/Components/headerComponent/header.component.html

@@ -0,0 +1,3 @@
+<div class="d-flex flex-row-reverse">
+    <button (click)="onButtonClick()">...</button>
+</div>

src/Components/headerComponent/header.component.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+import { SharedService } from '../../app/shared.service';
+
+@Component({
+    selector: 'header-component',
+    standalone: true,
+    templateUrl: './header.component.html',
+    styleUrl: './header.component.css',
+  })
+
+export class HeaderComponent{
+
+  constructor(public sharedService: SharedService) {}
+
+  onButtonClick() {
+    this.sharedService.addItem();
+  }
+}

src/app/app.component.html

@@ -1,3 +1,4 @@
+<header-component></header-component>
 <div class="container-fluid p-2">
     <basic-component></basic-component>
 </div>

src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { BasicComponent } from '../Components/BasicComponent/basic.component';
+import { BasicComponent } from '../components/basicComponent/basic.component';
+import { HeaderComponent } from "../components/headerComponent/header.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [BasicComponent],
+  imports: [BasicComponent, HeaderComponent],
 })
 export class AppComponent {
   title = 'Gridly';

src/app/shared.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';  // Import DomSanitizer and SafeHtml
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class SharedService {
+  public flexItems: SafeHtml[] = [];
+
+  constructor(private sanitizer: DomSanitizer){
+    this.flexItems = [
+      this.sanitizeHtml('')
+    ];
+  }
+
+  sanitizeHtml(html: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
+  addItem() {
+    if(this.flexItems.length <= 4){
+      const newItem = this.sanitizeHtml(`<div 
+        style="
+        height: 100%;
+        width:330px;
+        margin-left:1.5em;
+        background:darkgrey;">Flex item ${this.flexItems.length}</div>`);
+      this.flexItems.push(newItem); 
+    }
+  }
+}

src/styles.css

@@ -1,3 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 @import "bootstrap/dist/css/bootstrap.css";
-@import "bootstrap-icons/font/bootstrap-icons.css";
+@import "bootstrap-icons/font/bootstrap-icons.css";
+.flex-fill{
+    border:5px solid white;
+    height: 300px;
+    width: 300px;
+    background-color: lightgray;
+}