Merge pull request #20 from Carpenteri1/1-add--remove-components

1 add  remove components

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 '../app/components/basicComponent/basic.component';
+import { HeaderComponent } from "../app/components/header/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/components/basicComponent/basic.component.html

@@ -0,0 +1,3 @@
+<div class="d-flex flex-wrap" style="height: 300px;">
+    <div *ngFor="let item of sharedService.flexItems" [innerHTML]="item"></div>
+</div>

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

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

src/app/components/header/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/app/components/header/header.component.html

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

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

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

src/app/shared.service.ts

@@ -0,0 +1,39 @@
+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() {
+      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);
+    }
+  }
+}

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;
+}