top-bar.component implement

src/app/app.component.html

@@ -1,3 +1,10 @@
-<div></div>
+<div>
+    <app-top-bar></app-top-bar>
+</div>
+
+<div>
+    <app-img-show></app-img-show>
+</div>
+
 
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterOutlet} from '@angular/router';
+import {TopBarComponent} from "./top-bar/top-bar.component";
+import {ImgShowComponent} from "./img-show/img-show.component";
 
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [CommonModule, RouterOutlet],
+    imports: [CommonModule, RouterOutlet, TopBarComponent, ImgShowComponent],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })

src/app/app.config.ts

@@ -2,7 +2,8 @@ import {ApplicationConfig} from '@angular/core';
 import {provideRouter} from '@angular/router';
 
 import {routes} from './app.routes';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-    providers: [provideRouter(routes)]
+    providers: [provideRouter(routes), provideAnimations()]
 };

src/app/app.routes.ts

@@ -1,6 +1,5 @@
 import {Routes} from '@angular/router';
-import {TopBarComponent} from "./top-bar/top-bar.component";
 
 export const routes: Routes = [
-    {path: '', component: TopBarComponent},
+
 ];

src/app/top-bar/top-bar.component.html

@@ -1,5 +1,5 @@
 <div class="w-full h-fit">
-    <img src="/assets/img/bg-top-combine.png" class="w-full" alt="top-blank-logo" height="264" width="1200"/>
+    <img ngSrc="/assets/img/bg-top-combine.png" class="w-full" alt="top-blank-logo" height="264" width="1200"/>
 </div>
 
 <div class="flex bg-blue-600 text-white flex-row font-bold justify-around text-center items-center h-16 text-lg leading-16 overflow-hidden">