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
Related
I have added a condition and the page doesn't load the div anymore. Please let me know if I did something wrong. I am making an API call and fetching parentmodules which should bind if any data is present.
TypeScript:
import { Component } from '#angular/core';
import { Title } from '#angular/platform-browser';
import { ActivatedRoute, Router } from '#angular/router';
import * as _ from 'lodash';
import { Module } from '.../module';
#Component({
selector: '...',
templateUrl: './....html',
styleUrls: ['./....component.scss']
})
export class AdministrationComponent {
modules: Module[] = [];
parentmodules: Module[] = [];
showModules: boolean = false;..........
}
HTML:
<div *ngFor="let eachparentmodule of parentmodules" class="mt-5">
<h6 class="mb-0 text-uppercase">
{{eachparentmodule.name}}
</h6>
</div>
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
I have a ClientModule module separate from the main AppModule.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ClientsRoutingModule } from './clients-routing.module';
import { ClientsListComponent } from './clients-list/clients-list.component';
import { ClientAddComponent } from './client-add/client-add.component';
import { ClientDetailComponent } from './client-detail/client-detail.component';
#NgModule({
imports: [
CommonModule,
ClientsRoutingModule
],
declarations: [ClientsListComponent, ClientAddComponent, ClientDetailComponent]
})
export class ClientsModule { }
I have FormsModule imported on AppModule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I am trying to bind input fields from view to the following component:
import { Component, OnInit, Input } from '#angular/core';
import { ClientModel } from '../client.model';
#Component({
selector: 'app-client-add',
templateUrl: './client-add.component.html',
styleUrls: ['./client-add.component.scss']
})
export class ClientAddComponent implements OnInit {
fname: string;
lname: string;
constructor() { }
ngOnInit() {
}
createClient() {
console.log(this.fname, this.lname);
}
}
And following is my view
<div class="card-body">
<form class="form">
<div class="form-group">
<label for="">First Name {{fname}}</label>
<input type="text" ([ngModel]) = "fname" class="form-control rounded-0" required>
</div>
<div class="form-group">
<label for="">Last Name</label>
<input type="text" ([ngModel]) = "lname" class="form-control rounded-0">
</div>
<button type="button" (click)="createClient()" class="btn btn-success float-center">Create New Client</button>
</form>
</div>
When I click the Create New Client button, the resultant log is undefined undefined
What am I doing wrong? I have spent a lot of time tackling this issue/bug in my code but so far its no good. Please help.
And this may be unrelated but I followed angular.io guide on lazy-loading of modules, where it mentions I should see an incoming chunk file while lazy-loading is happening in network tab but I don't. Maybe it has something to do with it?
EDIT
I also tried importing FormsModule in in ClientsModule. Problem persists.
EDIT
However, [(ngModel)] works as expected in app.component.ts of AppModule.
My bad.
In my view ngModel should be a banana in the box [(ngModel)] but I mistyped as a box in the banana ([]).
I am new in Angular 2 and I am still in learning phase, but I stuck in a problem and not getting the solution to it. Please help.
I have made a view of a login, then a link to it after clicking the link it will redirect to home then clicking a link there it will redirect to some other view.
Below is my code structure:
app.routing.ts:
import { Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { UsersComponent } from './users/usercomponent';
export const routes: Routes = [
{ path: 'Home', component: HomeComponent },
{ path: 'Login', component: LoginComponent },
{ path: 'User', component: UsersComponent },
];
app.module.ts:
import { FormsModule } from '#angular/forms';
import { routes } from './app.routing';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/usercomponent';
#NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
declarations: [AppComponent, LoginComponent, HomeComponent, UsersComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
import { Component } from '#angular/core';
import { OnInit } from '#angular/core';
#Component({
selector: 'app-initializer',
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'Some NAme'
}
app.component.html:
<a routerLink="Login">Login</a>
<br />
<div>
<router-outlet></router-outlet>
</div>
login.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'login',
template: `
<h1><a routerLink="Home">Home</a>
<a routerLink="User">Users</a></h1>
<div>
<router-outlet></router-outlet>
</div>
`
})
export class LoginComponent {
constructor() {
}
}
The first page is working but after clicking home it is giving an error:
Cannot match any routes. URL Segment: 'Login/Home
I know that the link will be like / login, /home etc not like /login/home but how to implement it as I am not getting the solution for it and I am completely new to it.
Instead of giving only <h1><a routerLink="Home">Home</a>
you need to add / before the link like <h1><a routerLink="/Home">Home</a>.
How to manage nested link in angular2.
for eg. I have two file :
app.component.ts
import { Component, forwardRef } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';
import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { TestComponent } from './test.component';
import { HeroDetailComponent } from './hero-detail.component';
import { LinkComponent } from './link.ts'
#Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<link111></link111>
<router-outlet></router-outlet>
`,
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES, forwardRef(() => LinkComponent)],
providers: [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
HeroService
]
})
#RouteConfig([
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
},
{
path: '/detail/:id',
name: 'HeroDetail',
component: HeroDetailComponent
},
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
},
{
path: '/test',
name: 'Test',
component: TestComponent
}
])
export class AppComponent {
title = 'Tour of Heroes';
}
link.ts
import {Component} from 'angular2/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
#Component({
selector:'link111',
template:`
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
<a [routerLink]="['Test']">Test</a>
</nav>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class LinkComponent {
}
When [routerLink] define in app.component.ts in place of link111 tag it works, but when i separate it into different file it doesn't work.
please help me, Thanks.
When [routerLink] define in app.component.ts in place of link111 tag it works, because angular look routing from the
main root file(that is app.ts in your case), but when you separate it into different file it doesn't work because
than routing is defined in the root file but you are calling from childern (i.e not from parent). so to resolve this
change this like this -
<a [routerLink]="['./Dashboard']">Dashboard</a>
<a [routerLink]="['./Heroes']">Heroes</a>
<a [routerLink]="['./Test']">Test</a>
because If the route begins with ./, the router will look up the current components childern route from the root of the app.
From officials -
The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.
for more info refer this -
https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html
How to use child routes in Angular 2.
Angular 2 router examples + #RouteConfig typing support