Using Internal Link with Angular 9

Question

EDIT: I using href and section with id, to scroll to the div with the id specified, in the same component.

I did with a simple href="contato" and a section with id="contato" and works, but... i want to know how to do this without the error "Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'contato' Error: Cannot match any routes. URL Segment: 'contato'" on the console!

  <span class="nav-list" id="nav-list">
        <div fxFlex fxShow="true" fxHide.sm="true"></div>
            <a href="#inicio" class="nav-list-menu" alt="home">
                Home
            </a>
            <a href="#recursos" class="nav-list-menu" alt="Recursos">
                Recursos
            </a>
            <a href="#contato" class="nav-list-menu" alt="Contato">
                Contato
            </a>
            <a (click)="this.login()" class="nav-list-menu enter-button"  alt="Entrar no sistema">
                Entrar
            </a>
    </span>


<section id="recursos" style="width: 100%; height: 40px; background-color: white;"></section>

Just show the code of your routes path and the html code where you have used that particular route — kushal Baldev, Jul 14 '20 at 18:16
Question edited. All i want is just to scroll to a in div ( in the same component ). — Allan Lobo, Jul 15 '20 at 19:29

kushal Baldev · Accepted Answer · 2020-07-16T05:32:15.800

you can just do like this

document.getElementById('id').scrollIntoView();

Note don't use # as prefix while providing Id

An example would be like

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter


var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

you can access the component in angular by this way

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

There is a brief Documentation in Mozilla

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Just check it if your works get done Just Upvote and Approve if it works..!!

score 0 · Answer 2 · answered Jul 14 '20 at 18:22

0

You have to define routes like this in appRoutingModule.ts

const routes: Routes = [
  { path: 'first-component', component: FirstComponent 
},
  { path: 'second-component', component: b 
  SecondComponent },
];

Now the html code will be like

<nav>
  <ul>
    <li><a routerLink="/first-component" 
routerLinkActive="active">First Component</a></li>
    <li><a routerLink="/second-component" 
routerLinkActive="active">Second Component</a></li>
  </ul>
</nav>

Hope you get your answer just approve it if it works and upvote too ;)

answered Jul 14 '20 at 18:22

kushal Baldev

729
1
14
37

I think he also wants a hash fragment in the url, to scroll to the div with the id specified. – Pieterjan Jul 14 '20 at 18:28
Hmm let once the question be clear than we can edit the answer.. – kushal Baldev Jul 14 '20 at 18:30
Yes, Pieterjan it's right, question edited, with code. I trying to scroll to a div ( in the same component ). It's working but give me this error message on console; – Allan Lobo Jul 15 '20 at 19:26
ok ,let me figure out something..!! – kushal Baldev Jul 16 '20 at 05:14

Using Internal Link with Angular 9

2 Answers2