Angular 2 Ng Style Example

Angular 2 Ng Style allows us to easily style properties of an HTML element and bind the properties to values that we can edit programmatically.

angular-2-ng-style-example
angular 2 ng style example

Example Code Source :


import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>


<input [(ngModel)]="color" />
<button (click)="size = size + 1">+</button>
<button (click)="size = size - 1">-</button>

<div [ngStyle]="{'color': color, 'font-size': size + 'px', 'font-weight': 'bold'}">
Angular 2 Ng Style Example
</div>

</div>
`,
})
export class App {
color:string;

name:string;
constructor() {
this.name = 'Angular 2 Ng Style';
this.color = 'red';
this.size=20;
}
}

@NgModule({
imports: [ BrowserModule , FormsModule],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}

Angular 2 Ng Style Example demo