delete individual components

src/app/components/basicComponent/basic.component.html

@@ -1,3 +1,8 @@
 <div class="d-flex flex-wrap" style="height: 300px;">
-    <div *ngFor="let item of sharedService.flexItems" [innerHTML]="item"></div>
+    <div *ngFor="let item of sharedService.flexItems" 
+    class="action-btn"
+    style="height: 300px; width:330px; flex: 1 1 330px; margin: 10px; background:darkgrey;">
+        Flex item 
+    <button (click)="Remove(item.id)">Remove Button </button>
+</div>
 </div>

src/app/components/basicComponent/basic.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { CommonModule } from '@angular/common';  // Import CommonModule for *ngFor
 import { SharedService } from '../../shared.service';
 
@@ -11,4 +12,7 @@ import { SharedService } from '../../shared.service';
 })
 export class BasicComponent {
   constructor(public sharedService: SharedService) {}
+  Remove(id: number): void {
+    this.sharedService.Remove(id);
+  }
 }

src/app/components/header/header.component.html

@@ -38,7 +38,7 @@ <h5 class="modal-title" id="exampleModalLabel">
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="addComponent()">Add new component</button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="AddComponent()">Add new component</button>
       </div>
     </div>
   </div>

src/app/components/header/header.component.ts

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

src/app/shared.service.ts

@@ -1,39 +1,31 @@
 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[] = [];
+  flexItems: { id: number }[] = [];
 
-  constructor(private sanitizer: DomSanitizer){
-    this.flexItems = [
-      this.sanitizeHtml('')
-    ];
+  Remove(id: number) {
+    let index = this.GetId(id);
+    if(index > -1){
+      this.flexItems.splice(index, 1);
+    }
   }
 
-  sanitizeHtml(html: string): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustHtml(html);
+  AddItem() {
+    const newId = Math.floor(Math.random() * 100) + 1;
+    let index = this.GetId(newId);
+    console.log(index);
+    if(index === -1){
+      this.flexItems.push({ id: newId });
+    }
+    else
+      this.AddItem();
   }
 
-  addItem() {
-      const newItem = this.sanitizeHtml(`<div 
-        style="
-        height: 300px;
-        width:330px;
-        flex: 1 1 330px;
-        margin: 10px;
-        background:darkgrey;">Flex item ${this.flexItems.length}</div>`);
-        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);
-    }
+  GetId(id: number): number{
+    return this.flexItems.findIndex(item => item.id == id);
   }
 }