angular2-template

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

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

Angular 2: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

Figured out quick solution, update your @NgModule code like this : import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule } from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } … Read more

Angular2, what is the correct way to disable an anchor element?

Specifying pointer-events: none in CSS disables mouse input but doesn’t disable keyboard input. For example, the user can still tab to the link and “click” it by pressing the Enter key or (in Windows) the ≣ Menu key. You could disable specific keystrokes by intercepting the keydown event, but this would likely confuse users relying … Read more

Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)

Add BrowserModule to imports: [] in @NgModule() if it’s the root module (AppModule), otherwise the CommonModule. // older Angular versions // import {BrowserModule, CommonModule} from ‘@angular/common’; import { BrowserModule } from ‘@angular/platform-browser’ .. .. @NgModule({ imports: [BrowserModule, /* or CommonModule */], .. })

Angular2 – should private variables be accessible in the template?

UPD Since Angular 14, it is possible to bind protected components members in the template. This should partially address the concern of exposing internal state (which should only be accessible to the template) as the component’s public API. No, you shouldn’t be using private variables in your templates. While I like the drewmoore’s answer and … Read more

Angular 2 Scroll to top on Route Change

Angular 6.1 and later: Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called “Router Scroll Position Restoration”. As described in the official Angular blog, you just need to enable this in the router configuration like this: RouterModule.forRoot(routes, {scrollPositionRestoration: ‘enabled’}) Furthermore, the blog states “It is expected that this … Read more

OrderBy pipe issue

I modified @Thierry Templier’s response so the pipe can sort custom objects in angular 4: import { Pipe, PipeTransform } from “@angular/core”; @Pipe({ name: “sort” }) export class ArraySortPipe implements PipeTransform { transform(array: any, field: string): any[] { if (!Array.isArray(array)) { return; } array.sort((a: any, b: any) => { if (a[field] < b[field]) { return … Read more

Angular2 multiple router-outlet in the same template

yes you can, but you need to use aux routing. you will need to give a name to your router-outlet: <router-outlet name=”auxPathName”></router-outlet> and setup your route config: @RouteConfig([ {path:”https://stackoverflow.com/”, name: ‘RetularPath’, component: OneComponent, useAsDefault: true}, {aux:’/auxRoute’, name: ‘AuxPath’, component: SecondComponent} ]) Check out this example, and also this video. Update for RC.5 Aux routes has … Read more

How can I write data attributes using Angular?

Use attribute binding syntax instead <ol class=”viewer-nav”><li *ngFor=”let section of sections” [attr.data-sectionvalue]=”section.value”>{{ section.text }}</li> </ol> or <ol class=”viewer-nav”><li *ngFor=”let section of sections” attr.data-sectionvalue=”{{section.value}}”>{{ section.text }}</li> </ol> See also : How to add conditional attribute in Angular 2?