CODEWITHSUNDEEP
angularrenderingrouterlinkangular-routerlink
Chris Angel
Chris Angel

Reputation: 11

Component is rendering beneath the Home component

I have angular 19 website, in this website, I have used routerLink directive in my header component to navigate between the pages. Now when i am starting my development server and navigating first time to my about page using header navigation link (routerLink), the about page is loading beneath the home page, i dont know why... When i am reloading the page using chrome reload button, it is navigating to the about page correctly (not rendering the about page beneath the homepage). Also when i am using anchor tag, about page is loading correctly. Only when i am initially first time clicking on my about routerLink in my header its loading about beneath homepage.

This is my header.component.html:

<header class="app-header backdrop-blur-[6px] absolute w-full">
    <div class="logo">
        <a routerLink="/"><img src="/images/logo.png" alt=""></a>
    </div>
    <nav>
        <ul>
            <li><a routerLink="/" class="">Home</a></li>
            <li><a routerLink="/about" class="">About Us</a></li>
        </ul>
    </nav>
    <div>
        <button type="button" class="primary_button">Get Started</button>
    </div>
</header>

app.component.html:

<app-header></app-header>

<router-outlet></router-outlet>

header.component.ts:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLink, RouterModule } from '@angular/router';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [RouterModule, RouterLink, CommonModule],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss'
})
export class HeaderComponent {

}

this is my route.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { NotFoundComponent } from './pages/not-found/not-found.component';

export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '**', component: NotFoundComponent }
];

this is my home.component.html: (i have made difference sections inside home->components and then included them here in my home component)

<div class="home_comp">

    <app-hero></app-hero>
    <app-services></app-services>
    <app-best-service></app-best-service>
    <app-reach-service></app-reach-service>
    <app-professional-catalogue></app-professional-catalogue>
    <app-business></app-business>
    <app-review></app-review>

</div>

home.component.ts:

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faHeadset } from '@fortawesome/free-solid-svg-icons';
import { HeroComponent } from "./components/hero/hero.component";
import { ServicesComponent } from "./components/services/services.component";
import { BestServiceComponent } from "./components/best-service/best-service.component";
import { ReachServiceComponent } from "./components/reach-service/reach-service.component"; 
import { ProfessionalCatalogueComponent } from "./components/professional-catalogue/professional-catalogue.component";
import { BusinessComponent } from "./components/business/business.component";
import { ReviewComponent } from "./components/review/review.component"; 


@Component({
  selector: 'app-home',
  imports: [RouterModule, FontAwesomeModule, HeroComponent, ServicesComponent, BestServiceComponent, ReachServiceComponent, ProfessionalCatalogueComponent, BusinessComponent, ReviewComponent],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss'
})

export class HomeComponent {
  faHeadset = faHeadset;
}

I have tried everything, like importing the routerLink in header.component.ts, router-outelet is also placed in the app.component.html file correctly...

Upvotes: 1

Views: 46

Answers (1)

Edward Newsome
Edward Newsome

Reputation: 778

Angular components don't inherit height so you have to set it in the styling.

either with: :host { display: block; } in each component styles property or add with the cli / set as default:

"@schematics/angular:component": {
      "displayBlock": true
   }

Upvotes: 0

Related Questions