Reach the div of my router-outlet when I click on the navigation bar in the app.component in angular

Viewed 43

I have my app.component page and i want when i click to my navigation bar i reach this div particular div ()

app.component

<div class="navigation">
  <div id="navigation">
  <ul>
  <li class="active"><a [routerLink]="['/accueil']" >Accueil</a></li>
  <li><a  routerLink ="apropos" >A propos de nous</a> </li>
  <li class="has-sub"><a [routerLink]="" >Payer</a>
      <ul>
          <li><a [routerLink]="['/payer/nat']" >Vol national</a></li>
          <li><a [routerLink]="['/payer/int']" >Vol international</a></li>
      </ul>
  </li>
  <li><a routerLink="temoin" >Temoignages</a>
      <li><a routerLink="contact">Contact</a> </li>
  </ul>
  </div>
</div>
 <div class="space-medium">
      <router-outlet></router-outlet>
  </div>

I want to have this behaviour

  1. click on "Accueil", I go to div class="space-medium"
  2. click on "A propos de nous", I go to div class="space-medium"
  3. click on "Payer", I go to div class="space-medium"
  4. click on "Vol national", I go to div class="space-medium"
  5. click on "Vol international", I go to div class="space-medium"
  6. click on "Temoignages", I go to div class="space-medium"
  7. click on "contact", I go to div class="space-medium"

How can i do this ?

1 Answers

Use anchor link, see how angular doc page does it.

guide/forms is the component route. #build-a-template-driven-form is where the div(any html elements) is.

enter image description here

Related