I am providing the link to my GitHub codebase. Its simple Routing code but not even Home component displaying. I am not able to find whats went wrong in this. Please help me. Please go through connection in app-routing.module.ts as well as app.component.html
https://github.com/sireeshap/besty/blob/master/src/app/app.component.html
app.component.html
<header>
<div class='container'>
<a href='#' routerLink='/' class='logo'>Ethics & Habits</a>
<nav>
<ul>
<li><a herf='#' routerLink='/' routerLinkActive="active">Home</a> .</li>
<li><a routerLink='/about' routerLinkActive="active">About</a></li>
<li><a herf='#' routerLink='/vision' routerLinkActive="active">Vision</a></li>
</ul>
</nav>
</div>
</header>
<div class='container'>
<router-outlet></router-outlet>
</div>
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AppHomeComponent } from './app-home/app-home.component';
import { AppVisionComponent } from './app-vision/app- vision.component';
import {AppAboutComponent} from './app-about/app-about.component';
const routes: Routes = [
{path : ' ', redirectTo: '/home', pathMatch: 'full' },
{path : 'home', component : AppHomeComponent},
{path : 'about ', component : AppAboutComponent, pathMatch: 'full'},
{path : 'vision', component : AppVisionComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Sorry for asking the blunt question. Extra space added before path in app-routing.module.ts
Related
I want to have a selected state on a nav item in next 13, I could find no way of getting any context on a server component so ended up with a client component like this
'use client';
import Image from 'next/image';
import Styles from '../styles/header.module.css';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
interface MainRoute {
name: string;
path: string;
index: number;
}
const mainRoutes = [
{ name: 'home', path: '/' },
{ name: 'path 2', path: '/path2' },
{ name: 'path 3', path: '/path3' },
] as MainRoute[];
export default function Header({}) {
const path = usePathname();
return (
<header>
<div className={Styles.header}>
<h1>
App title
</h1>
</div>
<div className={Styles.header}>
<ul id="mainNav">
{mainRoutes.map((route, index) => (
<li key={index}>
<Link
className={path === route.path ? Styles.selected : ''}
href={route.path}
>
{route.name}
</Link>{' '}
{index !== mainRoutes.length - 1 ? <span>|</span> : ''}
</li>
))}
</ul>
</div>
</header>
);
}
Is this the best way to achieve this basic styling?
As far as I am aware, now all of this code has to be shipped over to the client.
This question already has answers here:
Apply CSS to active router link [Angular 2]
(3 answers)
Closed 2 years ago.
I am creating a angular page which uses mat-tab-nav-bar and mat-tab-link.
dashborad.component.html
<div><nav mat-tab-nav-bar>
<a mat-tab-link [routerLink]="['/home']">Home</a>
<a mat-tab-link [routerLink]="['/admin']">Admin</a>
<a mat-tab-link [routerLink]="['/order']">Orders</a>
</nav></div>
<div><router-outlet></router-outlet></div>
AppRoutingModule
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { HomeComponent} from './components/home/home.component';
import { AdminComponent} from './components/admin/admin.component';
import { OrdersComponent} from './components/orders/orders.component';
const routes: Routes = [
{path: 'dashboard', component: DashboardComponent ,
children: [
{path: 'home', component: HomeComponent},
{path: 'admin', component: AdminComponent},
{path: 'order', component: OrdersComponent},
{path: '', redirectTo: 'home', pathMatch: 'full'}
]
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I am able to get page as I want except one thing. When the page gets loaded it shows the default page but the tab is not showing as selected. When I click a tab it becomes active and shows the same page.So would like to know how to achieve the requirement.
You can use routerLinkActive attribute for the same. Where this attribute adds a class name to active element and then you can add CSS to that class
Find the syntax:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
Css:
.active-link
{
Color: Blue;
Font-size: 17;
}
I am using angular material design for making a website where I am unable to open home of side-bar. Please suggest me any solution.
https://stackblitz.com/edit/webkotactechsan-akntkf
used angular material design
<mat-nav-list>
<mat-card class="sidemenu">
<mat-list-item routerLink="home" routerLinkActive="active" >
<button mat-mini-fab color="primary" aria-label="Example icon-
button">
<mat-icon>home</mat-icon>
</button>
<span class="title"><b>Home</b></span>
</mat-list-item>
</mat-card>
unable to open home of side-bar
changes you need to do
change class name to export class HomeComponent in home.component.ts
spelling of home.component.scss is wrong, please correct it.
app.module.ts
import 'hammerjs';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AppMaterialModule } from './app.material.module';
import { AppComponent, DialogContentComponent } from './app.component';
import { HomeComponent } from './home/home.component'
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
];
#NgModule({
imports: [
BrowserModule,
FormsModule,
AppMaterialModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoute)
],
declarations: [AppComponent, DialogContentComponent, HomeComponent],
entryComponents: [DialogContentComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Changes I did in this file.
a) - added import { RouterModule, Routes } from '#angular/router';
b) - added import { HomeComponent } from './home/home.component'
c) -
const appRoute: Routes = [
{ path: 'home', component: HomeComponent }
]
;
d) - added RouterModule.forRoot(appRoute).
e) - added HomeComponent in declarations.
Then add <router-outlet></router-outlet> in your app.component.html.
Let me know if you have any doubt.
Please add routes in AppModule
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
],{onSameUrlNavigation: 'reload'}),
Live Example: Stackblitz
There is something you need to do to solve this problem and implement some angular way to manage components
1. Implement routing: The reason behind it, when you click on home, you need to go some router. So, we implement routing to solve this problem.
const appRoute: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home'},
{ path: 'home', component: HomeComponent },
{ path: 'birthday', component: BirthdayComponent}
];
In the above code, we took two components for example purpose. When we call that route, it loads that component. For example we go home route it loads home component.
2. Divide into components: We are implementing single page application. So, we don't need to copy and paste all the sidenav, topbar in all components.
We kept those sidenav and topbar in app components and load app-content into router-outlet. you can see your inside codes of app-component in home and birthday component.
<div class="app-content">
<router-outlet></router-outlet>
</div>
3. Change routerLink to home and birthday, so that we need to show home, it loads home components and when we need to show birthday, it loads birthday component.
and finally thanks to piyush jain for solving common mistakes of your code.
My Existing code
<a class="getStart-button line blue" href="#" (click)="navigateBack()" title="Back">Back</a>
I want to use code without href like this:
<a class="getStart-button line blue" (click)="navigateBack()" title="Back">Back</a>
Okay, try this.
<a class="getStart-button line blue" (click)="navigateBack()" title="Back">Back</a>
In component.ts:
import { Location, LocationStrategy, PathLocationStrategy } from '#angular/common';
#Component({
selector: 'selector',
providers: [Location, { provide: LocationStrategy, useClass: PathLocationStrategy }],
template: `your tempalte`
})
export class Component {
constructor(private location: Location) { }
public navigateBack(): void {
this.location.back();
}
}
Read more about Angular location service here.
i would like to do a routing from dashboard. But it is not working at all.
this is ts file:
import { Component, OnInit } from '#angular/core';
import { Section } from './sections';
import { SectionService } from './section.service';
#Component({
moduleId: module.id,
selector: 'my-dashboard',
templateUrl: 'dashboard.component.html',
styleUrls: [ 'dashboard.component.css' ],
providers: [SectionService]
})
export class DashboardComponent implements OnInit {
sections: Section[] = [];
constructor(private sectionService: SectionService) { }
ngOnInit(): void {
this.sectionService.getSections()
.then(sections => this.sections = sections.slice(0, 4));
}
}
and html file:
<h3>Sections</h3>
<div class="grid grid-pad">
<a *ngFor="let section of sections" routerLink="['/detail', section.id]" class="col-1-4">
<div class="module section">
<h4>{{section.name}}</h4>
</div>
</a>
</div>
<router-outlet></router-outlet>
Can anybody explain what is wrong?
this is app.module.ts
const sectionRoutes: Routes = [
{ path: 'detail/:id', component: SectionDetailComponent}
];
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(sectionRoutes)
],
There is no any compilation error. only i click and don't receive result of routing
I think you must use [routerLink] instead of routerLink:
<a *ngFor="let section of sections" [routerLink]="['/detail', section.id]" class="col-1-4">
<div class="module section">
<h4>{{section.name}}</h4>
</div>
https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html