Tutorial by Examples

<div [class.active]="isActive"></div> <span [style.color]="'red'"></span> <p [attr.data-note]="'This is value for data-note attribute'">A lot of text here</p>

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Angular 2 App</h1> <p>Component is directive with template</p> ` }) export class AppComponent { }

<div *ngFor="let item of items">{{ item.description }}</div> <span *ngIf="isVisible"></span>

import {Directive, ElementRef, Renderer} from '@angular/core'; @Directive({ selector: '[green]', }) class GreenDirective { constructor(private _elementRef: ElementRef, private _renderer: Renderer) { _renderer.setElementStyle(_elementRef.nativeElement, 'color', 'gree...

form1.component.ts: import { Component } from '@angular/core'; // Defines example component and associated template @Component({ selector: 'example', template: ` <div *ngFor="let f of fruit"> {{f}} </div> <select required> <option ...

In this example we are going to create a directive to copy a text into the clipboard by clicking on an element copy-text.directive.ts import { Directive, Input, HostListener } from "@angular/core"; @Directive({ selector: '[text-copy]' }) export class TextCopyDir...

Given a directive that highlights text on mouse events import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { @Input('appHighlight') // tslint:disable-line no-input-rename highlightColor: str...