Angular2 router keep query string

Issue I wrote an Angular2 (v2.0.1) application that makes use of the router. The website is loaded with several query string parameters, so the full URL initially looks like this: https://my.application.com/?param1=val1&param2=val2&param3=val3 In my route configuration, I have an entry which

Continue reading

Incorrect functioning of routes in Angular

Issue When trying to navigate from ‘users’ to ‘users/:id’ like this this.router.navigate([`/users/${userId}`]); or this.router.navigate([‘/users’, userId]); it stays on ‘users’ but url in browser bar changes to ‘users/{correct_id}’ Application structure: dashboard (/) login (/login) users (/users) users/id (/users:id) I suspect the

Continue reading

why the text is not display in angular?

Issue I am trying to display component text in angular 2 .but it is not display .could you please tell me where I am doing wrong ? here is my code http://plnkr.co/edit/PrWxwf3wT5COVxRwIpqX?p=preview <!DOCTYPE html> <html> <head> <script src=”https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js”></script> <script src=”https://code.angularjs.org/tools/system.js”></script>

Continue reading

Navigation Through Component – Angular 2

Issue I can navigate perfectly through View using [routerLink]. When I am trying to navigate through Component using this.router.navigate([‘/Todos’]) or this.router.navigateByUrl(‘/todos’), initially the router is changing correctly to index.html#/todos and then the router is automatically changing to index.html?#/login. I don’t

Continue reading

Router directives in two places for same purpose

Issue I am having a bit of trouble understanding the logic here root-component import { Component } from “angular2/core”; import { TopNavigationComponent } from “./shared/navigation.component”; import { ArcListComponent } from “./arc/arc-list.component”; import { ArcNewItemComponent } from “./arc/arc-new-item.component”; import { RouteConfig

Continue reading

Pass a component from child to a parent directive in angular 2

Issue This is my parent component : @Component({ selector : “app”, template : ‘ <app-header></app-header> <top-navigation></top-navigation> <router-outlet></router-outlet> <app-footer></app-footer> <page-js-rersources></page-js-rersources>’, directives : [AppHeader, AppFooter] }) @RouteConfig([ {path: ‘/’, name: “UserHome”, component: LandingPage, useAsDefault: true }, {path: ‘/login’, name: “Login”, component: LoginSignUp

Continue reading

Lazy Loading Folder in angular 2

Issue I am currently using angular version RC-1 can you please explain me how to implement a lazy loading in angular with an example with in the guide lines https://angular.io/docs/ts/latest/guide/style-guide.html#!#sts=Lazy%20Loaded%20Folders it would be very useful to implement in my project

Continue reading

Bootstrap Navigation menu in Angular 2

Issue From Build a Navigation Menu with Bootstrap 4, I have created a top navigation menu: <nav class=”navbar navbar-fixed-top navbar-dark bg-inverse”> <div class=”container”> <a class=”navbar-brand”>Angular Router</a> <ul class=”nav navbar-nav” routerLinkActive=”active”> <li class=”nav-item”><a class=”nav-link” routerLink=”home”>Home</a></li> <li class=”nav-item”><a class=”nav-link” routerLink=”about”>About</a></li> <li class=”nav-item”><a

Continue reading

How to transform date with angular 2?

Issue i want to transform the date coming from the server in this format to this format (‘yyyy-mm-dd hh-mm-ss’) Solution <!–Import in app.module–> import { DatePipe } from ‘@angular/common’; providers: [DatePipe] <!–HTML–> <input [ngModel]=”startDate |date: ‘yyyy-MM-dd'” name=”startDate”/> <button type=”button” (click)=”transformDate(startDate)”>Aceptar</button>

Continue reading

Angular template rendering non-encoded URL

Issue How do I render a URL which is not encoded. Below is a sample import { Component } from ‘@angular/core’; import { Router } from ‘@angular/router’; @Component({ selector: ‘demo-app’, template: `<a [routerLink]=”stringURL”>Click here</a>`, styleUrls: [ ‘./app.component.css’ ] }) export

Continue reading

Angular 2 routerLink params & query params

Issue Here is my route: { path: ‘market/:currency’, component: MainlayoutComponent, canActivate: [AuthGuard]} I want redirect to with query params like this: market/btc?sidebar=home <a [routerLink]=”[‘/market’, currency]” [queryParams]=”{sidebar: ‘home’}”></a> But when i click its redirect market/btc What’s the problem. Editing This code

Continue reading

Subscription is not assigneable to type route

Issue I am trying to set canActivate route but I am getting syntax error(Subscription is not assigneable to type route): canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { const pin = route.paramMap.get(‘pin’); let canActivate; if (pin) { return this.partService.getCached(pin).pipe( take(1), concatMap(p => {

Continue reading

Angular 2 Router 3.0.0 still displaying /#/ hash on route

Issue My package json has “@angular/router”: “3.0.0” My app routes: export const routeConfig: Routes = [ {path: ”, redirectTo: ‘use-cases’, pathMatch: ‘full’}, {path: ‘use-cases’, component: UseCasesComponent}, {path: ‘add’, component: AddComponent}, {path: ‘github’, component: RepoBrowserComponent, children: [ {path: ”, component: RepoListComponent},

Continue reading

angular 2 rc5 template parse error

Issue I keep getting this error when I’m trying to create an angular routing link: zone.js:461 Unhandled Promise rejection: Template parse errors: Can’t bind to ‘routerLink’ since it isn’t a known property of ‘a’. (” </h1> <button (click)=”doLogin()”>Login</button> <a [ERROR

Continue reading

use routerLink with parameter that is coming from promise in angular2

Issue i am working on an angular2 app. i want to use with a parameter that i get in a promise. i keep getting this error: EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:5000/js/angular-client/app/components/some/some.component.html:0:7 caused by: c is null normalizeCommands/_loop_1@http://localhost:5000/js/angular-client/node_modules/@angular/router/bundles/router.umd.js:2384:15

Continue reading

Template is not rendering in Angular2

Issue I want to render html template by giving url in Angular2, But template is not loading. I am using visual studio code editor, Below is my code and structure. import {Component} from ‘angular2/core’; import {LoginComponent} from ‘../Login/login.component’ @Component({ selector:

Continue reading

How to avoid cascading ngOnInit?

Issue I have two component with parent and child relationship. Parent component’s ngOnInit method checks if the user is logged in or not, if it’s not logged in it navigates to the login page. class ParentComponent implements OnInit{ ngOnInit(){ if(!authService.loggedIn){

Continue reading

Angular2 location.back() page reloads?

Issue I am in need to give a Go-Back button for this I am using location services as: import {Location} from ‘@angular/common’; backclicked(): void { console.log(“back clicked.”); this.location.back(); } <a id=”redirect-link” (click)=”backclicked();” style=”padding:8px 15px;” > Issue is this that location.back()

Continue reading

Angular component inside of router-outlet on child route will not fill available space

Issue My application’s root <router-outlet></router-outlet> will display the following component in a child Module when navigating to the ‘/child’ route: child.component.ts import {Component} from “@angular/core”; @Component({ template: ` <div style=”display:flex; width: 100%; height: 100%;”> <custom-sidebar-component></custom-sidebar-component> <router-outlet></router-outlet> </div>` }) export class

Continue reading