Button click - navigate do different component angular

Question

So here's a snippet of my page snippet

and as you can see I've got my toolbar with little cute buttons

I'm trying to navigate to sections of my page by clicking on those buttons (clicking on about me should scroll down to the start of the section About Me) and I'm having a hard time figuring this out.

I'll post below the toolbar and about me components, as well as the app.component.html file.

toolbar.html:

<mat-toolbar class="example-toolbar">
  <span style="margin-left: 120px; height: 40px">Jane Doe</span>
  <span class="example-spacer"></span>

  <div>

    <button mat-button >
      About
    </button>
....

(the rest is just the same button tags but for the other stuff)

about-me.component.html:

<div class="main-div" id="abme">
  <mat-card class="example-card shadow">
    <mat-card-content>
      <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
        <div fxLayout="column" fxFlex="50%">

          <p class="title">About me</p>
          <br>

          <p class="about-me-content" style="font-size: 16px">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac quam augue tempor blandit et sit amet mi.
            Donec fringilla dictum tellus, sed porttitor diam. In tempus turpis quis aliquet efficitur.
            Proin auctor lacus rhoncus ultrices hendrerit. Sed eu aliquet metus, vulputate lacinia ex. <br>
            <br> Nulla venenatis nulla nec tellus convallis iaculis id hendrerit nibh. Pellentesque sed eleifend diam.
            Suspendisse nec rhoncus augue, id pellentesque sem. Nullam pellentesque ipsum ut dignissim semper.
          </p>
        </div>

        <div fxLayout="column" fxFlex="50%" style="padding-left: 150px">
        // then in this column are the icons, i believe irrelevant to this problem

      </div>
    </mat-card-content>
  </mat-card>
</div>

and app.component.html:

<app-toolbar></app-toolbar>
<br>
<app-cover-card></app-cover-card>
<br><br>
<app-about-me style="padding: 30px"></app-about-me>
<br><br>
<app-professional-skills style="padding: 40px"  ></app-professional-skills>

The .ts files are just as they were generated, I've not changed a thing inside them. Any suggestions/useful links would be appreciated!

Chiranjaya Denuwan · Accepted Answer · 2021-07-31 16:11:16Z

1

You have to use scrollIntoView() to scroll around pages. Give the correct element id of the page in the ts file to navigate.

toolbar.html:

<button mat-button (click)="navigateSection()">
      About
</button>

toolbar.ts:

 navigateSection(): any {
    const element = document.getElementById('abme') as HTMLElement;
    element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
 }

Here when the about button clicks it smoothly navigates to the about section in the page.

answered Jul 31, 2021 at 16:11

Chiranjaya Denuwan

6837 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rajquest · Accepted Answer · 2021-12-15 20:57:32Z

0

use routerLink attribute

<button type="button" mat-raised-button color="warn" routerLink="/component">

answered Dec 15, 2021 at 20:57

rajquest

7411 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

Button click - navigate do different component angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related