How to show the content using side navigation bar in Angular?

Question

Hi All,

I want to display some static content whenever we click any index from the left menu like in the attached image. Also, the content should be on a single page like in this link https://docs.spring.io/spring-framework/docs/current/spring-framework-reference/core.html#beans-annotation-config. Whenever I click the any of the indexes the corresponding content should be visible to the user by scrolling the page. Can anyone suggest me an idea to achieve this using Angular and bootstrap? Thanks in advance.

Answer 1

For showing content using Side bar

.html

<div class="sidebar"> 
   <li (click)=""goToList('content1')>Side bar list 1</li>
</div>
<div id="content1" class="content1">
    CONTENT
</div>

.ts

goToList(id: any) {
    const element: HTMLElement = document.getElementById(id);
    if (element) {
         element.scrollIntoView({ behavior: 'smooth' });
     }
  }

Try this Method it will be working fine as you want