I'm using Angular Router and I'm trying to link to a sub-component in another route by id. Basically what would usually be done using the <a href="www.url.com/profile/#profile-header-id">.
I'm not sure if there's a built-in way for the Angular router to do this, but if not perhaps I can manually trigger the link at a later point when I know the element has been rendered.
The issue isn't linking to another route which of course is done with the Link from the Angular router. The issue is linking to an element which is found in the rendered HTML of the linked component.
Less Abstract Code Example:
So let's say my router in the app.module.ts file is
`const routes = [
{ path: '', component: HomeComponent},
{ path: '#section3', component: HomeSection3Component},
{ path: 'B', component: BComponent},
];`
Now in component OtherComponent, I want a Link that not only takes me to the home page route ' ', but also scrolls to the element of id #section3, thereby skipping all the irrelevant stuff.
My home component has nested components for each one of the sections of the page. Each section/component has an id.
home.component.html
`<main>
<app-section1></app-section1>
<app-section2></app-section2>
<app-section3></app-section3>
</main>`
However, all I can see is a blank page when clicking the button <button routerLink="#section3">Go to homepage section 3</button> on the B page.
The most elegant solution is just to add a fragment property to add the #section3 to the URL and then make it jump to this section with an anchor tag.
<div [routerLink]="['']" fragment="section3">
Jump to 'Section3' anchor
</div>
Use the routerLink directive combined with its fragment input property.
<a routerLink fragment="section3">Section 3</a>
With your routes, the rendered DOM is
Section 3
Make sure that you have imported RouterModule in the declaring module of the component in which you use the routerLink directive. Example:
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
#NgModule({
declarations: [
HomeComponent,
HomeSection1Component
HomeSection2Component,
HomeSection3Component,
],
imports: [
CommonModule,
RouterModule,
],
})
export class HomeModule {}
Related
I'm currently using Angular for a few weeks for a small project and I wanted to add an anchor in my app.
So normally in order to add an anchor without using any framework, you'd create a block with an ID
<div id="top"> then you'd add an anchor tag <a href="#"> with the href attribute that would be equal to the ID of the block of the page we want to redirect the to.
ex:
<div id="top">...</div>
...
When we click on the link, it scrolls up to the page* to the block we defined the ID with.
*if we add in the CSS of the html or body tag scroll-behavior: smooth;
The issue is that when I add that inside my Angular template, it redirects me to the URL with the name of the ID on the href attribute!
If I take the previous example, here's what would happen:
localhost:4200/login → (click to the link) → localhost:4200/#top
Strangely it treats it as if it was a router link attribute
So I'm wondering how we could add an anchor in Angular
So I found a solution! (thanks to #Benjamin Looi for giving me the link to a relevant post)
So actually Angular has an issue with anchor tags when we want the user to another part of the same page
The solution is to use routerOptions of type extra options in the appRoutingModule and add in some options, here's the code:
const routes: Routes = [...];
const routerOptions: ExtraOptions = {
useHash: false,
anchorScrolling: 'enabled',
onSameUrlNavigation: 'reload' //Must have if you want to be able to use the anchor more than once
};
#NgModule({
imports: [RouterModule.forRoot(routes, routerOptions)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Then in the template, we have to add the anchor of the block we want to redirect the user in the attributes fragment with the name of the ID and routerLink with the page you're in (otherwise it will redirect to "/")
ex:
<a routerLink="/login" fragment="top"></a>
Now it will successfully redirect to the top of the page!
May be this might help
HTML code :
<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>
Ts code :
scrollToElement($element): void {
console.log($element);
$element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
got it from this
Using HTML anchor link #id in Angular 6
app.component.ts
<div>
<app-head></app-head>
<app-body></app-body>
</div>
head.component.ts
...
#Component({
selector: 'app-head',
templateUrl: './head.component.html',
styleUrls: ['./head.component.scss'],
providers: []
})
...
body.component.ts
...
#Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.scss'],
providers: []
})
...
So the pages loads with content head + body but now I wanted to route to a different page and replace entire existing page with the new page. How do I do that?
In my app.module.ts I have the following...
const routes: Routes = [
{ path: 'newPage', component: NewComponent}
]
I wanted use when clicked a button to be redirected to this page and replace existing <app-head> and <app-body> is this possible?
If I just use below I still see the current <app-head> and <app-body>
<button type="button" (click)="loadNewPage()" >
body.component.ts
loadNewPage() {
this.router.navigate(['/newPage']);
}
The results give me the current page.... and doesnt really apply since I am not concating the contents together. I want to replace the head.html and body.html with newpage.html from the NewComponent.ts
You need to replace the content in AppComponent with a router-outlet component and move that replaced content to a new component such as HomeComponent. Use the HomeComponent in your default route so it will load when you initially visit the site.
It's probably best if you check the documentation for Routing & Navigation since this is a pretty fundamental topic in Angular and there are a lot of details you should learn before you get too far.
App.component.html
<router-outlet></router-outlet>
home.component.html
<div>
<app-head></app-head>
<app-body></app-body>
</div>
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent }
{ path: 'newPage', component: NewComponent}
]
You will want to put a <router-outlet></router-outlet> in your app component and move what's in your current app component to a new component. Then update your routes to:
const routes: Routes = [
{ path: '', component: TheStuffYouMovedComponent },
{ path: 'newPage', component: NewComponent }
]
Building a simple application.
The app is loading with the contents of app.component.html.
There are some menu items like About Us page, contact Us page.. etc
The problem is - When I route to any of these pages, the content of app.component.html is displayed along with the content of contact.component.html when I click on contact us page.
Is there a way to remove the app content when the route to another component has taken place
You have to use <router-outlet></router-outlet> in your app.component.html and create a new component for your home page and do as following in Routes :
import {Routes, RouterModule} from '#angular/router';
import {HomeComponent} from './home/home.component';
import {AboutUsComponent} from './aboutus/aboutus.component';
import {ContactUsComponent} from './contactus/contactus.component';
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'aboutus', component: AboutUsComponent},
{path: 'contactus', component: ContactUsComponent},
]
I just started migrating an app to Angular + Flex-Layout + Angular Material.
I decided to have my routing in an external file called "app-routing.module.ts". I export my module in in the app.module.ts within "imports". This is my routing file:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './home/home.component'
import { CreateMatchComponent } from './match/create-match.component'
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'match/new', component: CreateMatchComponent}
];
#NgModule({
imports: [ RouterModule.forRoot(routes)],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
And here is the HTML from the app.component that renders my router outlet.
<div class="containerX">
<div fxLayout="row wrap">
<mat-toolbar color="primary" class="mat-elevation-z4">
<span>Amazing Football Stats App</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">favorite</mat-icon>
<mat-icon class="example-icon">delete</mat-icon>
</mat-toolbar>
</div>
<div fxLayout="row wrap" style="padding-top: 8px">
<router-outlet></router-outlet>
</div>
</div>
As you can see, my App Component has a div with the navigation bar and then another div with my <router-outlet>.
If I go to localhost:4200 it loads <app-root> which contains the <nav-bar> and the <router-outlet> and since the "route" is empty it redirects me to "/home".
Now my problem is this: If I change the URL to: localhost:4200/match/new (In the browser, in the URL bar) hit enter, I would expect to leave the <nav-bar> and only update the <router-outlet> and the same goes backwards.
If I am on a different page and I change the URL to "/home" (or even leaving it empty) it should keep the nav bar and only update the router outlet.
Sorry if this is a stupid question I just started with angular routing. What am I doing wrong?
When you change the browser location, the browser is handling that change and will send a new HTTP request to your server. That's why it reloads the whole page.
In order to only change the component loaded in the <router-outlet>, you need Angular's router to handle the change, which is done by using the routerLink directive:
<a routerLink="match/new" routerLinkActive="active">Create Match</a>
or programmatically with a call to router.navigate:
constructor(private router: Router) {}
...
goToCreateMatch() {
this.router.navigate(['/match/new']);
}
Here's a link to angular's documentation, for more info:
https://angular.io/guide/router#router-links
https://angular.io/api/router/Router#navigate
I can't work out why Angular will not allow me to reference my components selector. I have a page which when you click on a list item the page should bring up another templates html. This is my code.
The error I keep receiving is 'message-component' is not a known element:
1. If 'message-component' is an Angular component, then verify that it is part of this module.
2. If 'message-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Messages.component.html
<div id="Case" class="w3-container city" style="display:none">
<h2>Case</h2>
<message-case> </message-case>
</div>
I don't understand why it is giving me this error when the Message Component is declared and imported in both the NgModule and within the component.
Messages.Module.ts
#NgModule
({
imports: [SharedModule],
declarations: [
MessagesComponent,
MessageCaseComponent,
MessagesFilterPipe,
CreateMessageComponent,
],
})
Finally this is the file I am trying to display using the components selector
import { Component, OnInit } from '#angular/core';
import { IMessage } from './message';
import { ActivatedRoute, Router, Params } from '#angular/router';
import {MessagesComponent} from './messages.component';
import {CreateMessageComponent} from './createmessage.component';
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: 'message-case.html'
})
All help would be appreciated! I'm seemingly at a dead end right now.
Firstable the name file is wrong you putted this filename in the description
"Messages.component.html"
And the path of the template must contains "./" if it is in the same folder if it is in another folder you must put the relative path folder/file
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: './Messages.component.html'
})