angular2-template

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 ->][routerLink]="['/createservice']" href="#">Post a Service</a> <router-outlet></router-outlet> "): AppComponent@4:3 ; Zone: <root> ; Task: Promise.then ; Value: BaseExceptionconsoleError @ zone.js:461 zone.js:463 Error: Uncaught (in promise): Template parse errors:(…) This is my code: <a [routerLink]="['/createservice']" href=

I have the following tab structure in my page, with it's respective URLs given in braces: Main Tab (/page) / | \ / | \ / | \ / | \ Sub Tab 1 Sub Tab 2 Sub Tab 3 (/page/a) (/page/b) (/page/c) Component @Input() route: string = ''; selectTab(tab) { let route = this.router.url.split('?')[0]; /* Here redirectUrl = "/page/c" */ if (tab.redirectUrl.length > 0) { // console.log(tab.redirectUr); gives /page/c this.router.navigate([tab.redirectUrl]); // This works but reloads the page and is a very bad idea. // window.location.href = tab.redirectUrl; } } Component.html NOTE: The actual code has a

Problem is to pass the object or multiple arguments from template to component and use them to add data to API. task.service.ts addTasks(task: Task): Observable<Task>{ let headers = new Headers({'Content-type': 'application/json'}); let options = new RequestOptions({ headers: headers }); return this.http.post(this.tasksUrl, {task}, options) .map(this.extractData) .catch(this.handleError); } task.component.ts addTasks(task){ this.taskService.addTasks(task) .subscribe( task => this.tasks.push(task), error => this.errorMessage = <any> error ); } Template Inputs: <input #todoTime type="text" class

I have a template user like following: <div class="jumbotron"> <div class="container"> <h2><i class="fa fa-user"></i> {{username}}</h2> <p><i class="fa fa-star"></i> {{reputation}}</p> </div> </div> <app-list user={{username}}"></app-list> My component for app-list looks like: export class ListComponent implements OnInit { @Input() user: string; constructor() { } ngOnInit() { console.log(this.user); } } The username and reputation is correctly shown on the page. However the username value is not passed correctly to the sub component app-list as it only print out an empty string. How can I pass

I have a primeng (angular 2) dialog with a dropdown. I want to set focus to the dropdown when the dialog shows. The problem appears to be that my div is rendered conditionally. My code: <p-dialog (onShow)="fe.applyFocus()"> <div *ngIf="selectedItem"> <button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button> <p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown> </div> </p-dialog> In this code the button works fine, but the onShow() (outside the *ngIf div) tells me fe is undefined. How can I access the local variable inside the

My Angular 4 application has a Component that has a refresh method that pulls-in a large object from my web-service, like so: DTOs/Model types: class NuclearReactorStatus { public reactorName: string; public coolingRods: CoolingRodStatus[]; // array of 1024 elements } class CoolingRodStatus { public rodId : number; public temperature: number; public status : string; } Inside the NuclearReactorDisplayComponent : public reactorStatus: NuclearReactorStatus; refresh(): void { this.http.get<NuclearReactorStatus>() .subscribe( status => { this.reactorStatus = status; }, err => { console.error( err )

Based on an example in the cookbook, I am creating components dynamically like this: private loadComponent(): void { const componentFactory = this.factoryResolver.resolveComponentFactory(MyInputComponent); const viewContainerRef = this.componentHost.viewContainerRef; viewContainerRef.clear(); const componentRef = viewContainerRef.createComponent(componentFactory); (<IComponent>componentRef.instance).data = data; } MyInputComponent's template would look like this: <input type="text" [(ngModel)]="data.inputProp"> I need to update the value of data.inputProp in the parent when the user types in