angular2-ngmodel

I have an array like this: objectArray = [ {"name": "Car"}, {"name": "Bike"}, {"name": "Boat"}, {"name": "Plane"} ]; And the template like this: <li *ngFor="#obj of objectArray"> <a href="#" class="small" data-value="option1" tabIndex="-1"> <input type="checkbox" (change)="expression && expression.value = $event.target.checked ? true : undefind" [ngModel]="expression?.value"> <label for="">{{ obj.name }}</label> </a> </li> But this is set true when 1 checkbox is checked. How do i set this separately ? I guess this is what you want: <li *ngFor="let obj of objectArray"> <a href="#" class="small"

I was using JQuery inputmask in one of my forms along with [(ngModel)] , but for some reason they won't work together. Using either one by itself works perfectly fine, but combining the two completely breaks [(ngModel)] and new inputs don't get sent back to the component. After struggling with this for a while I figured using Angular 2's pipes would be a good solution, however I can't figure out how to get those two to work together either. Here is some code I am using for testing my pipe <input [(ngModel)]="Amount" id="Amount" name="Amount" class="form-control" type="number" autocomplete="off

I want to change (force) input field values while typing using a attribute Directive. With it I would like to create directives like uppercase, lowercase, maxlength, filterchar, etc. to be used on input fields on forms. I found this example: Angular 2 Attribute Directive Typescript Example but this doesn't seem to work. Maybe it did for an earlier build of Angular2. It is however exactly what I would like to do. When I create a directive like this: import {Directive} from 'angular2/core'; import {NgModel} from 'angular2/common'; @Directive({ selector: '[ngModel][uppercase]', host: { '(input)'

I have this code in my template: <select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)"> <option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option> </select> In my component: public selectedSubSectionId: any; public onSubSectionChange(subSectionId: any) { // some code I execute after ngModel changes. } This works ok, but at the beginning I have an empty box. I want to show a placeholder message there. How can I do this using ngModel? My solution: In the component typescript file I add a property

I made a simple UI which consist two components (parent and child). What the UI does is that when I type some stuff in the input box of the Child component. The value will change using ngModel. The child component works fine that way. // Child Component @Component({ selector: 'child', template: ` <p>{{sharedVar}}</p> <input [(ngModel)]="sharedVar"> ` }) export class ChildComponent { sharedVar: string; } Now I have a parent component which I intend to use the same value as Child Component. I added the Child Component into the Parent template, and use dependency injection to call Child Component