Angular2 – Interpolate string with html

You can simply use [innerHTML] directive to accomplish it. import {Component, Pipe} from ‘@angular/core’ @Component({ selector: ‘my-app’, template: ` Hello my name is <span [innerHTML]=”myName”></span> `, }) export class AppComponent { myName=”<strong>Pardeep</strong>”; } Update: I checked it doesn’t work this way after RC.1 release. Let’s say to make it work with RC.4 you can … Read more


Edit : Now it is documented <ng-container> to the rescue The Angular <ng-container> is a grouping element that doesn’t interfere with styles or layout because Angular doesn’t put it in the DOM. (…) The <ng-container> is a syntax element recognized by the Angular parser. It’s not a directive, component, class, or interface. It’s more like the curly braces in a … Read more

How to add “class” to host element?

This way you don’t need to add the CSS outside of the component: @Component({ selector: ‘body’, template: ‘app-element’, // prefer decorators (see below) // host: {‘[class.someClass]’:’someField’} }) export class App implements OnInit { constructor(private cdRef:ChangeDetectorRef) {} someField: boolean = false; // alternatively also the host parameter in the @Component()` decorator can be used @HostBinding(‘class.someClass’) someField: … Read more

Angular2: How is ngfor expanded

Yes, all magic happens in the compiler. Let’s take this template: <div *ngFor=”let foo of foobars”>{{foo}}</div> First it will be transformed to the following: <div template=”ngFor let foo of foobars>{{foo}}</div> And then: <template ngFor let-foo [ngForOf]=”foobars”><div>{{foo}}</div></template> In Angular2 rc.4 it looks like this First is generated ast tree node (Abstract Syntax Tree node) and then … Read more

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=$” /> Alternatively, you can make this a directive: @Directive({ selector: ‘input[type=text]’, host: { ‘(input)’: ‘ref.nativeElement.value=$’, } }) export class UpperCaseText { constructor(private ref: ElementRef) { } } … Read more

Generate dynamic css based on variables angular

You can use ngStyle to dynamically add the css to your page from json. <div [ngStyle]=”{‘color’: variable ? ‘red’ : ‘blue’}”></div> An another example: <div md-card-avatar [ngStyle]=”{‘background-image’: ‘url(‘ + post.avatar + ‘)’, ‘background-size’: ‘cover’ }”></div> here I have loaded background image from json-data.

Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef

When creating a component you can pass the DOM node that will act as a host element of the created component: create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any, ngModule?: NgModuleRef): ComponentRef But since this component is not child of any other component, you have to manually attach it to ApplicationRef so you get change detection. So … 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