angular2-template

I am using Angular2 - Reactive Forms. Everything works fine until i want to show a pre-populated value in one of fields in Form. Scenario: There are multiple buttons on a page and each button opens up a form with fields as Name Email Message Product Code --> Value for this shall be prepopulated as per item code from service. Failing Scenario: Product Code input value turns to null. TS Code: import { FormGroup, FormBuilder, Validators } from '@angular/forms'; queryForm: FormGroup; constructor(private _productService: ProductService, fb: FormBuilder) { this.queryForm = fb.group({ 'name': [null,

I'm writing some Angular2 templates that have repetitive portions with different containers. In this case, the view can change if things are grouped and if multi section mode is enabled. Please excuse the long example, but something like this: <template [ngIf]="isCategoryGrouped"> <div *ngFor="#categories of categories"> <div>{{ categories.category.name }}</div> <div *ngFor="#thing of categories.things"> <label *ngIf="isMultiSelectMode"> <input type="checkbox" (change)="updateThingSelection(thing, $event)" /> <img [src]="thing.image" /> {{ thing.name }} </label> <a href="javascript: void(0)"

I have an email sending scenario in which there is an input box of 'To'(whom you want to send a message). app.html <input type="text" class="form-control" [(ngModel)]="email.Tos"> Now I want that when a user input the multiple emailId in input box by comma separated, then in my model, 'Tos' value should bind in an Array of string. Like : ["abc@gmail,com" , "xyz@gmail.com"]. Now, please tell me how to split the input box value as per my requirement. You need to use split() function. Component let toArray = this.email.Tos.split(","); variable toArray will contain an array of emails. Please check

I have one component with one html and .ts file. For some reasons I have to create multiple pages (HTML) pages. Is it possible to create multiple (html) pages for single class (component)? Or is it possible to provide dynamic TemplateUrl to the component? My main motive is to provide different URL and to use different view (HTML pages) but using single class (.ts class i.e component)? I have seen many questions referred below related to that but unable to found exact solution- Dynamic template URLs in Angular 2 How can I have dynamic templateUrl for Angular2 Component? I want something like

I want to disable changing the URL when routing in my Angular 2 app. I know that skipLocationChange: true has to be passed as a NavigationExtras parameter to the router. My question is: Is it possible to pass NavigationExtras to a routerLink from inside the template? What I have tried: <h1> {{title}} </h1> <ul> <li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li> <li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li> </ul> <router-outlet></router-outlet> but it does not work. After clicking a link, the route changes to http://localhost:4200

I have a simple app created with Angular-CLI, I wanted to refactor and move the app.component.ts code in separate component file and started to get a nasty error: Module not found: Error: Can't resolve on './sb/sb.component.html' ( my SBComponent). Under the This what i have: app.module: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { SBComponent } from './sb/sb.component' @NgModule({ declarations

I face issue in formGroup . First Based on URL I take some value and call to API for retrieve particular user-data for pre-field text. register.html <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-4 ">Username</label> <div class="col-sm-8"> <input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly"> </div> </div> </form> register.component.ts import { Component } from '@angular/core'; import { FormGroup, AbstractControl,

I need to do an equivalent of this in Angular2 : <?php foreach ($somethings as $something) { foreach ($something->children as $child) { echo '<tr>...</tr>'; } } Can this be achieved with ngFor and not adding new elements between <table> and <tr> ? I have a sample that might be similar to what you want: <table id="spreadsheet"> <tr *ngFor="let row of visibleRows"> <td class="row-number-column">{{row.rowIndex}}</td> <td *ngFor="let col of row.columns"> <input data-id="{{col.rowIndex}}-{{col.columnIndex}}" [value]="col.cellValue" (input)="col.cellValue = $event.target.value" (click)="model