Angular 6 link to section in other component? - html

Question

I have a navbar component with this code:
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >Inicio <span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Here Link Home Section 2 <span class="sr-only"></span></a>
</li>
</ul>
and have another component HomeComponent with 3 sections:
<section id="home_one">
stuff
section
one
</section>
<section id="home_two">
stuff
section
two
</section>
<section id="home_three">
stuff
section
three
</section>
How can I link from navbar links to specific section (section 2) in another component (homeComponent)?

Answer 1

Angular 6.1 has new featured called anchorScrolling, Enable this option and use Router fragement
app.module.ts
#NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes, {
anchorScrolling: 'enabled',
})],
declarations: [AppComponent, HelloComponent, ComponentbComponent],
bootstrap: [AppComponent]
})
app.component.html
<a [routerLink]="['item']" [fragment]="'section2'">
section2
</a>
<router-outlet></router-outlet>
Example:https://stackblitz.com/edit/angular-zgmsuw

Answer 2

In an angular way Its better for you to use Angular Router
Create Three components Instead of Sections
home_one
home_two
home_three
Then In your App Module Or in Seperate Routing Module declare you routes like:
const routes: Routes = [
{ path: 'home_one', component: home_one},
{ path: 'home_two', component: home_two },
{ path: 'home_three', component: home_three }
{ path: '', component: home }
{ path: '*', component: home }
];
Then In your Imports add routes
#NgModule({
imports: [RouterModule.forRoot(routes)],
})
Then In you 'Home page' or where ever you want to Render these sections Add Router Outlet, It will be something like this
<your-navbar-component></your-navbar-component>
<router-outlet></router-outlet>
In Your navbar configure your Anchor for your routes properly
<ul class="navbar-nav mx-auto">
<li class="nav-item " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" [routerLink]="['/home_one']" >Home One <span class="sr-only"></span></a>
</li>
<li class="nav-item " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" [routerLink]="['/home_two']" >Home Two<span class="sr-only"></span></a>
</li>
<li class="nav-item " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" [routerLink]="['/home_three']" >Home Three<span class="sr-only"></span></a>
</li>
</ul>
For more Visit Official documentation:
https://angular.io/guide/router

Answer 3

If this is onclick of tabs and changing of corresponding section of tabs:-
.ts
tab = 'tab0';
.html
<ul class="navbar-nav mx-auto">
<li class="nav-item active" (click)='tab = "tab0"'>
<a class="nav-link" href="#" >Inicio <span class="sr-only"></span></a>
</li>
<li class="nav-item active" (click)='tab = "tab1"'>
<a class="nav-link" href="#">Here Link Home Section 2 <span class="sr-only"></span></a>
</li>
</ul>
<section id="home_one" *ngIf="tab ==='tab0'">
stuff
section
one
// Here you can pass selctor of a separate component for each section
// <tab0-component></tab0-component>
</section>
<section id="home_two" *ngIf="tab ==='tab1'">
stuff
section
two
</section>
<section id="home_three" *ngIf="tab ==='tab2'">
stuff
section
three
</section>
If you want to go to corresponding fragment onclick ie to scrollview in that document:-
Angular2 Routing with Hashtag to page anchor
If you want to change routes for each tab then:-
app.routing.ts
// create routes for each tab
.ts
constructor(public router:Router){
}
opentab(routes){
this.router.navigate[routes]
}
.html
<ul class="navbar-nav mx-auto">
<li class="nav-item active" (click)= 'opentab("tab0")'>
<a class="nav-link" href="#" >Inicio <span class="sr-only"></span></a>
</li>
<li class="nav-item active" (click)= 'opentab("tab1")'>
<a class="nav-link" href="#">Here Link Home Section 2 <span class="sr-only"></span></a>
</li>
</ul>
<router-outlet></router-outlet>