<!-- string interpolation to data property of component -->
    {{ data }}
    <!-- binding markup property to property of component -->
    [< HTML property name >] = "data"
    <!-- handling event using an expression -->
    (< HTML event name >) = "< expression >"
    <!-- two way databinding -->
    [(ngModel)] = "data"
        

    (click) = "onClick()"
        

target property of the event is the element raising the event

in markup

    <input
        type="text"
        (input) = "onInput($event)"
        ... />
                

    onInput(event) {
        var inputValue = event.target.value;
        ...
    }
        

    import { FormsModule } from '@angular/forms';
        

    <input
        type="text"
        [(ngModel)] = "< property name >"
        ... />
                

components are directives with a template

directives are components without a template

    @Directive({
        selector: 'appTurnGreen'
    })
    export class TurnGreenDirective {
        ...
    }
        

    <p appTurnGreen> content </p>
        

changes the structure of the DOM

the asterik denotes a structural directive

    <p *ngIf="expression returning a boolean"> content </p>
        

    <div style="text-align:center;">
        ...
        <!--  else points to an ng-template identified as 'noServer'-->
        <p *ngIf="serverCreated; else noServer">server created</p>
        <!-- only shown when serverCreated is false -->
        <ng-template #noServer>
            <p>No server created.</p>
        </ng-template>
        ...	
    </div>   
        

    <label [ngStyle]="{color: getColor()}">
        some text where the color depends upon the color returned by getColor
    </label>    
        

    @Component({
        selector: 'app-server',
        templateUrl: './server.component.html',
        styles: [`
            .online{
                color: green;
            }
        `]
    })
    export class ServerComponent { }
        

    <label 
        [ngStyle]="{backgroundColor: getColor()}" 
        <!-- [ngClass] = "{CSS class: CSS property === boolean expression}"; -->
        [ngClass]="{online: serverStatus === 'online'}">
        Server with ID of {{ serverId }} is {{ getServerStatus() }}.
    </label>
        

    ...
    export class ServersComponent implements OnInit {
        ...
        servers = ['Server 1', 'Server 2'];
        
        onCreateServer() {
            this.serverCreationStatus = 'Server was created. The name is ' + this.serverName;
            this.servers.push(this.serverName);
            this.serverCreated = true;
            this.serverName = '';
        }
        ...  
    }
        

    <div style="text-align:center;">
        ...
        <app-server *ngFor="let server of servers"></app-server>
    </div>
        

    <!-- get the index of the iteration (zero-based) -->
    <div *ngFor='let click of clicks; let idx = index'>
        <label 
            style="width:100px;">
            Click #{{ idx }} 
        </label>
    </div>           
        

    <!--  this style shrinks laterally and all selections may not be visible -->
    <div class='collapse navbar-collapse' >
    <!--  this style stacks the selections vertically as the control shrinks laterally-->
    <div class='navbar-default' >
        

    export class Ingredient {
        constructor(public name: string, public amount: string) {}
    }