CODEWITHSUNDEEP
angular
Hosam Abdeltawab
Hosam Abdeltawab

Reputation: 11

Why are angular component overlapping?

I am messing around with angular to get a better understanding of it. I created two components, a navigation component & an about component. The navigation component holds the navbar while the about component is another page that has a routerLink to it. My problem is that they are overlapping. The navbar is overlapping with the about image (i.e. the about page doesn't start after the navbar component)

In my main app component, I have the following:

<body>
  <app-navigation></app-navigation>    
  <router-outlet></router-outlet>
</body>

In my component I have the following:

<!--Main Navigation-->
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
    <a class="navbar-brand" href="#">UEFA</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link"  href="#">Players <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Top Players</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="about">About UEFA</a>
        </li>
      </ul>
    </div>
  </nav>
<!--Main Navigation-->
</html>

In my about component I have the following:

<html>
 <head>
    <link href="https://fonts.googleapis.com/css?family=Corben" 
 rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nobile" 
 rel="stylesheet">
 </head>
 <h1 class="text text-center text-white"> UEFA Champions League</h1>
</html>

Currently, it looks like this: Current program output

While it should look something like this: Final program output

Upvotes: 1

Views: 1025

Answers (1)

Johna
Johna

Reputation: 1894

Remove </html> in the last line of navigation component.

Your about component should have only. <h1 class="text text-center text-white"> UEFA Champions League</h1>

Make your main component like below.

<html>
     <head>
        <link href="https://fonts.googleapis.com/css?family=Corben" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Nobile" rel="stylesheet">
     </head>

     <body>
         <app-navigation></app-navigation>    
         <router-outlet></router-outlet>
     </body>
</html>

Upvotes: 1

Related Questions