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.
Related
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.
I'm new to nativescript. I'm navigation from Alert page to
Naviagation page. I have posted all relevant codes.please check it.
I'm not getting any issue.When performing image onClick I'm able to call this method onNotification().
I'm able to see this console log in command prompt
console.log("SteveCheck", "Test");
But I don't know, Why it is not moving to notification page when
click on the button in alert page.Below I have added all the relevant codes.
app.module.ts:
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AlertComponent } from "./AlertFolder/alert.component";
import { NativeScriptRouterModule } from "nativescript-angular/router"
import {AppRoutes, AppComponents } from "./app.routing";
#NgModule({
declarations: [AlertComponent, ...AppComponents],
bootstrap: [AlertComponent],
imports: [
NativeScriptModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(AppRoutes)
],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
app.routing.ts:
import { AlertComponent } from "./AlertFolder/alert.component";
import { NotificationComponent } from "./Noficiation/notification";
export const AppRoutes:any = [
{ path: "", component: AlertComponent },
{ path: "NotificationPage", component: NotificationComponent}
];
export const AppComponents: any = [
AlertComponent,
NotificationComponent
];
alert.component.ts:
#Component({
selector: "sdk-child-component",
moduleId: module.id,
....
})
export class AlertComponent {
.....
.....
public constructor(private router: Router, private routerExtensions: RouterExtensions){
this.alertList = [];
}
onNotification() {
console.log("SteveCheck", "Test");
this.router.navigate(["NotificationPage"]);
}
}
alert.component.html:
<StackLayout class="borders" orientation="horizontal" >
<Label class="notification-label" text="Notification Center" ></Label>
<Image src="res://right_arrow" stretch="none" class="right-arrow" (tap)="onNotification()"></Image>
</StackLayout>
constructor(private routerExtensions: RouterExtensions) {
// ...
}
this.routerExtensions.navigate(["/NotificationPage"]);
I have to use Path folder name Notification. I have that second page NotificationComponent placed inside that Notification folder only.That's why I'm unable to navigate between pages.
By changing this :
this.router.navigate(["NotificationPage"]);
to this:
this.router.navigate(["Notification"]);
fixed my issue
Here is an example , we can include routerLink on the img tag-
<img src="../../../assets/images/Notification.png" [routerLink]="['/NotificationPage']" width="55%" height = "200px" class="img-responsive" style="margin-left: 220px">
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
i have been working with a product list Project and while configuring routes to navigate between different views, I get a red squiggly under the '#Routes' decorator and when i hover over the Routes, it says 'Routes only refers to a type, but is being used as a value here'. I researched in so many sights including here and tried many different ways to resolve this but I could not find out the issue.
app.component.ts
import { Component } from '#angular/core';
import { ProductListComponent } from './products/product-list.Component';
import { ProductService } from './products/product.service'
import { Routes } from '#angular/router';
import 'rxjs/Rx'; // Load all features
import { WelcomeComponent } from './home/welcome.component'
#Component({
selector: 'pm-app',
template: `
<div>
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<a class='navbar-brand'>{{pageTitle}}</a>
<ul class='nav navbar-nav'>
<li><a>Home</a></li>
<li><a>Product List</a></li>
</ul>
</div>
</nav>
</div>
` ,
entryComponents : [ProductListComponent],
providers: [ProductService]
})
#Routes([
{ path: '/welcome' , name: 'Welcome' , component: WelcomeComponent, useAsDefault: true},
{ path: '/products' , name: 'Products' , component: ProductListComponent }
])
export class AppComponent {
pageTitle:string = 'Acme Product Management';
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { ProductListComponent } from './products/product-list.Component';
import { HttpModule } from "#angular/http";
import { RouterModule } from '#angular/router'
import { ProductFilterPipe } from './products/product-filter.pipe';
import { StarComponent } from './shared/star.component';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule,FormsModule,HttpModule,RouterModule],
declarations: [ AppComponent,ProductListComponent,ProductFilterPipe,StarComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
welcome.compnent.ts
import { Component } from '#angular/core';
#Component({
templateUrl: 'app/home/welcome.component.html'
})
export class WelcomeComponent {
public pageTitle: string = 'Welcome';
}
I think my coding is fine. But unable to get the expected result. Please Help!
Found out, the issue is... with RC5, Routes is an array of path's & is no more a Decorator, and you have to import 'RouterModule' instead of 'provideRouter'. While exporting you have to use 'RouterModule.forRoot'.
Also with RC5, we no longer specify the string name of the component while configuring routes instead we only specify the path & component only. And we no longer use the prefix '/' for the path. Also we no longer using useAsDefault instead we use redirectTo property to configure the default path.
I have used a separate module to do my route configurations instead of doing it in the root component as earlier. An updated version of my route configuration is given as below. Hope this will be helpful.
app.routes.ts
import { Routes, RouterModule } from '#angular/router';
import { ProductListComponent } from './products/product-list.Component';
import { WelcomeComponent } from './home/welcome.component'
import { ProductDetailComponent } from './products/product- detail.component';
const routes: Routes = [
{
path: 'welcome' ,
component: WelcomeComponent,
},
{
path: 'products' ,
component: ProductListComponent
},
{
path: 'product/:id' ,
component: ProductDetailComponent
},
{
path:'',
redirectTo:'/welcome',
pathMatch:'full'
},
];
export const routing = RouterModule.forRoot(routes);
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