I have the following sample code to explain my doubt.
I have an "a" tag with a href="#menu"
to direct to another part of the same page (the nav
one with the id="menu"
). With HTML
pure I don't have any problem, in fact the url it displays is the correct one (with the suffix #menu
), but when I want to pass this to my Angular project it doesn't work.
From what I see it redirects me to the pagina 404
one I configure for the routes I don't use and I assume it's because of that suffix that is added to the URL .
The question is about how I can take this behavior to the Angular project in which I want to apply it?
My code:
<div class=" logo jumbotron card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ; display:flex; justify-content:center; align-items:center;">
<div class="text-white text-center py-5 px-4">
<div>
<a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; " class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--Navbar-->
<nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">naveacion</a>
</nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Thank you very much in advance ...
Since version 6.1 , it
Angular
has incorporated the functionAnchor Scrolling
for this purpose. Its implementation is somewhat more complex than the traditionalHTML
position method that requires the RouterModule and its ExtraOptions . The code would be like this:In the main module
app.module.ts
:In your component logic
app.component.ts
(define aarray
with the view sections. This is optional, you can apply the names directly in the view)In your component view
app.component.html
I hope it helps you, greetings.
Not sure if this is angular's own directive, but in ionic it works fine (Ionic is pretty much angular), so try the following, instead of putting an href, put in your HTML, something like:
This works for lazy loading if I'm not wrong, check this link:
https://medium.com/@HenryGBC/c%C3%B3mo-implement-lazy-loading-in-angular-74b6e85d021f
That angular directive is applicable to any clickable object.