I am trying to use routerlinl, but somehow it is not clickable. Please can someone help. Following are the codes:
**app.module.ts:**
import { RouterModule } from '#angular/router';
.....
#NgModule({....})
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{ path: 'employees', component: EmployeesComponent },
{ path: 'login', component: LoginComponent },
{ path: 'index', component: IndexComponent },
{ path: '**', component: PageNotFoundComponent },
{ path: '', pathMatch: 'full', redirectTo: '/index' }
])
],
**app.component.html:**
<h1>App (root) component</h1>
<ul class="nav nav-tabs">
<li>
<a routerlink="/login" routerLinkAction="active">Login</a>
</li>
</ul>
<router-outlet></router-outlet>
**app.component.ts:**
import { RouterModule, Routes } from '#angular/router';
....
(The .... means there are codes but not putting here due to relevance).
Change routerlink to routerLink
like
routerLink="/login"
not
routerlink="/login"
Care about letter casing as selectors are case sensitive.
Related
Hello guys First of all i am learning angular 5 for the first time. What i want is to redirect from page to another using a button.I don't know how to make it work.I am using angular 5. This is my code:
Home.component.html
<div style="text-align:center">
<button (click)="btnClick()">Add Employee</button>
</div>
<br>
<div style="text-align:center">
<button (click)="btnClick()">Employee List</button>
</div>
<br>
Home.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
}
btnClick(){
this.router.navigate(['/employees']);
}
}
I don't have route.config but what i have is app.module.ts if i am doing anything wrong please tell me
app.module.ts:
...........
import { HomeComponent} from './home/home.component';
import { RouterModule, Routes } from '#angular/router';
import { EmployeesComponent } from './employees/employees.component';
#NgModule({
declarations: [
AppComponent,
EmployeesComponent,
EmployeeComponent,
EmployeeListComponent,
AppHeaderComponent,
AppFooterComponent,
HomeComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ToastrModule.forRoot(),
],
It seems like you need to configure your application's routes first so the router outlet knows what component to load when ['/employees'] is called
there is a good explanation under : https://angular.io/tutorial/toh-pt5
First, you must configure the route
import { HomeComponent} from './home/home.component';
import { RouterModule, Routes } from '#angular/router';
import { EmployeesComponent } from './employees/employees.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent }
{ path: 'employees', component: EmployeesComponent }
{ path: '', redirectTo: 'home', pathMatch: 'full' }
];
#NgModule({
declarations: [
AppComponent,
EmployeesComponent,
EmployeeComponent,
EmployeeListComponent,
AppHeaderComponent,
AppFooterComponent,
HomeComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ToastrModule.forRoot()
RouterModule.forRoot(routes),
],
then in your in your AppComponent HTML you need to use the router outlet (assuming you want your employees to show on the app component)
<router-outlet></router-outlet>
Angular2 LazyLoading When i click on Link its Loading Its component,Htmlpages,Modules But not display Html page in <router-outlet>
Masterpage
<a [routerLink]="['Customer/Add']">Customer</a><br />
<a [routerLink]="['Employee/Add']">Employee</a><br />
<router-outlet>
</router-outlet>
CustomerComponent
import { Component } from "#angular/core"
#Component({
templateUrl: '../../ui/customer/customer.html'
})
export class CustomerComponent {
}
CustomerModule
#NgModule({
imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
declarations: [CustomerComponent],
bootstrap: [CustomerComponent]
})
export class CustomerModule {
}
CustomerRoute
import { Component } from "#angular/core"
import { CustomerComponent } from "../components/customer/customercomponent"
export const CustomerRoute = [
{ path: "Add", Component: CustomerComponent}
]
MainRoute
import { Component } from "#angular/core"
import { Routes } from "#angular/router"
import { HomePageComponent } from "../components/homepage/homepage"
export const ApplicationRoutes= [
{ path: '', component: HomePageComponent },
{ path: 'UI/MasterAngularPage.html' ,component: HomePageComponent },
{ path: 'Customer', loadChildren: '../modules/customermodule/customermodule#CustomerModule'},
]
Use following code to redirect on add route.
export const CustomerRoute = [
{ path: "", redirectTo: "Add", pathMatch:"full"},
{ path: "Add", Component: CustomerComponent}
]
Remove bootstrap code from CustomerModule.
#NgModule({
imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
declarations: [CustomerComponent]
})
Hope it will help
So, I have a layout like this:
<div class="page-container">
<app-header></app-header>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<app-side-nav></app-side-nav>
<app-broadcast-show></app-broadcast-show>
<router-outlet></router-outlet>
</div>
</div>
</div>
And all components are working well with this, except for one. This is my Router array:
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{
path: 'admin', component: MainComponent, children: [
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'fund_transfers/deposits',
component: FundTransfersComponent,
children: [
{
path: 'edit',
component: DepositComponent
},
],
},
{
path: 'fund_transfers/withdrawals',
component: FundTransfersComponent,
},
{
path: 'profile',
component: ProfileComponent
},
{
path: 'broadcast',
component: BroadcastCreateComponent
}
]
},
];
Route
children: [
{
path: 'edit',
component: DepositComponent
},
],
Doesn't show when I click on a button that is leading there. I registered Component, created it like I created the rest of the components that are working, but it is not triggering constructor nor onInit, nor is it hiding the previous view and showing the deposit/edit.
Anybody has any solution to this?
Found out whats going on. If using route as child, then in the parent html I need to set router-outlet, not in the first in line, in my case, admin, but rather in fund_transfers/deposits.
Following is how my app's 'tree' looks like:
I want my app to go to the 'home' route by default (when the path is empty). (localhost:3000/home).
But it always goes to localhost:3000/list.
app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'userManagement', loadChildren: 'app/userManagement/user- management.module#UserManagementModule' }]
user-management.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'list', pathMatch: 'full' },
{ path: 'list', component: UserListComponent }]
However, when the redirections works fine when triggered through HTML links:
app-component.html
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="home" routerLinkActive="active">Home</a> <!--localhost:3000/home-->
</li>
<li class="nav-item">
<a class="nav-link" routerLink="userManagement" routerLinkActive="active">Link</a> <!--localhost:3000/userManagement/list-->
</li>
</ul>
you need to separate your routes as you separate your modules.
import { Routes } from '#angular/router';
import {UserManagementRoutes} from "./userManagement/userManagement.routes";
import {HomeRoutes} from "./home/home.routes";
export const routes: Routes = [
...UserManagementRoutes,
...HomeRoutes,
{ path: '', redirectTo: 'home', pathMatch: 'full'}
];
import {Route} from '#angular/router';
import {UserManagementComponent} from "./userManagement.component";
export const UserManagementRoutes: Route[] = [
{
path: 'userManagement',
children: [
{path: '',component: UserManagementComponent}
]
}
];
import {Route} from '#angular/router';
import {HomeComponent} from "./home.component";
export const UserManagementRoutes: Route[] = [
{
path: 'home',
children: [
{path: '',component: HomeComponent}
]
}
];
I am working on an angular sample app. The effect I want to get is the following:
I have a login page. When you login, you see the 'home' page. Right now, the home page is a simple html protected by authguard. I want this page to have a header section and body section. This is similar to gmail where the section at the top remain the same for all actions. For eg, the ability to logout appear in the top.
I want couple of routed in this header section that will load the different components in the body section.
This is what I have and does not seem to work.
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]
, children: [
{path: 'home', component: HomeComponent, pathMatch: 'full'},
{ path: 'compb', component: ComponentB, outlet: 'list' },
{ path: 'compa', component: ComponentA, outlet: 'list' }
]
},
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
my home.component.html
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
<p><a [routerLink]="['/compb']">CompB</a></p>
<p><a [routerLink]="['/compa']">CompA</a></p>
<br/><br/>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
Here is starting of the body!
<router-outlet name="list"></router-outlet>
Here is ending of body!
</div>
</div>
</div>
compA and compB are simple html pages to display "coponentA here" and "ComponentB here"
Any guidance will be much appreciated.
After some effort, I got it to work with child routes.
In my app.routes.ts, I initially had :
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]
, children: [
{path: 'home', component: HomeComponent, pathMatch: 'full'},
{ path: 'compb', component: ComponentB, outlet: 'list' },
{ path: 'compa', component: ComponentA, outlet: 'list' }
]
},
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
I changed it to the following:
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], children:homeRoutes },
// { path: 'home', component: HomeComponent, canActivate: [AuthGuard]
// , children: [
// {path: 'home', component: HomeComponent, pathMatch: 'full'},
// { path: 'compb', component: ComponentB, outlet: 'list' },
// { path: 'compa', component: ComponentA, outlet: 'list' }
// ]
// },
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
I added the following to home.routes.ts
export const homeRoutes: Routes = [
{ path: 'compa', component: ComponentA },
{ path: 'compb', component: ComponentB },
];
In my home.component.html, I added the following:
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
<p><a [routerLink]="['compb']">CompB</a></p>
<p><a [routerLink]="['compa']">CompA</a></p>
<br/><br/><br/><br/><br/><br/>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
Here is starting of the body!!<br/>
<router-outlet></router-outlet>
Here is ending of body!!
</div>
</div>
</div>