Setup layout

src/Components/BasicComponent/basic.component.css

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

src/Components/BasicComponent/basic.component.html

@@ -0,0 +1,10 @@
+<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>

src/Components/BasicComponent/basic.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'basic-component',
+    standalone: true,
+    templateUrl: './basic.component.html',
+    styleUrl: './basic.component.css',
+  })
+export class BasicComponent{
+
+}

src/app/app.component.html

@@ -1,11 +1,3 @@
-<div class="container">
-    <div class="row">
-        <div class="col-2"><h1>hellow</h1></div>
-        <div class="col-8" style="border:2px solid red;">
-            <h1>Hello World</h1>
-            <i class="bi bi-tsunami"></i>
-        </div>
-        <div class="col-2"></div>
-    </div>
-</div>
-<router-outlet />
+<div class="container-fluid p-2">
+    <basic-component></basic-component>
+</div>

src/app/app.component.ts

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

src/app/app.config.ts

@@ -1,9 +1,5 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration()]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
 };