You can simply use [innerHTML] directive to accomplish it. http://plnkr.co/edit/6x04QSKhqbDwPvdsLSL9?p=preview 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
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
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
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
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.
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
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
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
No, directives can’t be added or removed dynamically. They are only applied to HTML statically added to component templates. What you could do is to enable/disable the directive by passing a parameter (@Input()) to the directive to notify it to do something or not.