title: How to set "activate" class to bootstrap navbar in Angular 2 while using page anchor navigation?
body: <p>I am creating a single page website using Angular 2 and Bootstrap 4. </p>
  
  <p>I created a navbar component that is always on top of the page and I am using page anchor navigation (#id). Please note that I haven't created a routing module (so far it hasn't been necessary to do this).</p>
  
  <p>The navbar code is below:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default fixed-top navbar-inverse navbar-toggleable-md"&gt;
    &lt;div class="container"&gt;
  
      &lt;div class="navbar-header"&gt;
        &lt;button class="navbar-toggler navbar-toggler-right btn btn-outline-secondary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"&gt;
          &lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="index.html"&gt;Garatéa&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="collapseExample" class="navbar-collapse collapse" [ngbCollapse]="isCollapsed"&gt;
        &lt;ul class="nav navbar-nav ml-auto"&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#home"&gt;Início&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#about"&gt;Sobre&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#team"&gt;Quem Somos&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#contact"&gt;Contato&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Each link corresponds to a section of the single page website, for example, the home component template is:</p>
  
  <pre><code>&lt;div id="home" class="text-center home-background"&gt;
    &lt;div class="overlay"&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;Bem vindo à &lt;strong&gt;&lt;span class="title-text"&gt;Garatéa&lt;/span&gt;&lt;/strong&gt;&lt;/h1&gt;
        &lt;p class="lead"&gt;Somos uma inciativa que &lt;strong&gt;aumenta a taxa de sobrevivência&lt;/strong&gt; em emergências médicas.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is: how can I highlight the link in the navbar that corresponds to the section of the website that I am currently browsing? For example, if I am looking at the team about section, I expect to have an <code>active</code> CSS class on the navbar: <code>&lt;li class="nav-item active"&gt;&lt;a class="nav-link" href="#about"&gt;Sobre&lt;/a&gt;&lt;/li&gt;</code>.</p>