angular2-template

How to convert input value to uppercase in angular 2 (value passing to ngControl)

by

As @Eric Martinez suggested, you can create a local template variable, and bind the uppercase string to the value property on the input event: <input type=”text” #input (input)=”input.value=$event.target.value.toUpperCase()” /> Alternatively, you can make this a directive: @Directive({ selector: ‘input[type=text]’, host: { ‘(input)’: ‘ref.nativeElement.value=$event.target.value.toUpperCase()’, } }) export class UpperCaseText { constructor(private ref: ElementRef) { } } … Read more

string concatenation with property binding in angular2

by

I found out that you can use this kind of syntax using square brackets: <li *ngFor=”#course of courses; #i = index” [id]=”‘someselector-‘+i”>{{course}}</li> For more information, please have a look to this interesting article from Pascal Precht: http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html

Playing HTML 5 video from Angular 2 Typescript

by

Problem is you’re trying to get a reference to video element using its id. You need to use template reference variable (#) instead: <div class=”video”> <video controls (click)=”toggleVideo()” #videoPlayer> <source src=”https://stackoverflow.com/questions/40360174/{{videoSource}}” type=”video/mp4″ /> Browser not supported </video> </div> Read more about template reference variable here. Edit: Also, in your toggleVideo(event: any) function, you need to … Read more

Set null as empty string value for input field

by

After viewing a bunch of answers about ValueAccessor and HostListener solutions, I made a working solution (tested with RC1): import {NgControl} from “@angular/common”; import {Directive, ElementRef, HostListener} from “@angular/core”; @Directive({ selector: ‘input[nullValue]’ }) export class NullDefaultValueDirective { constructor(private el: ElementRef, private control: NgControl) {} @HostListener(‘input’, [‘$event.target’]) onEvent(target: HTMLInputElement){ this.control.viewToModelUpdate((target.value === ”) ? null : target.value); … Read more

Angular2 ngSwitch with only

by

<ng-container [ngSwitch]=”activeLayout”> <ng-container *ngSwitchCase=”‘layout1′” [ngTemplateOutlet]=”template1″></ng-container> <ng-container *ngSwitchDefault [ngTemplateOutlet]=”defaultTemplate”></ng-container> </ng-container> This is my solution when I need to make a switch of different ng-template. I hope it works for you.

Format number of seconds as mm:ss in Angular 2

by

Angular Date Pipe works with number value too, But please note: Only with milliseconds. If you want to get mm:ss(00:00) you need to convert your number value to milliseconds. In your case it should be: 3600 * 1000 <div class=”time-box” *ngIf=”p.value.playerTimer > 0″> {{ p.value.playerTimer * 1000 | date:’mm:ss’ }} </div> here is the Stackblitz … Read more