The Basics
data binding between logic and template
    <!-- 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"
        

Top

Index

event binding
binding an event handler to an element event
    (click) = "onClick()"
        

Top

Index

passing and using data with event binding
$event represents the event's data

target property of the event is the element raising the event

in markup

    <input
        type="text"
        (input) = "onInput($event)"
        ... />
                
the event handler
    onInput(event) {
        var inputValue = event.target.value;
        ...
    }
        

Top

Index

two-way databinding
FormsModule must be imported
    import { FormsModule } from '@angular/forms';
        
    <input
        type="text"
        [(ngModel)] = "< property name >"
        ... />
                

Top

Index

understanding directives
directives are instructions for the DOM

components are directives with a template

directives are components without a template

    @Directive({
        selector: 'appTurnGreen'
    })
    export class TurnGreenDirective {
        ...
    }
        
used in markup
    <p appTurnGreen> content </p>
        

Top

Index

using ngIf to output data conditionally
ngIf is a structural directive

changes the structure of the DOM

the asterik denotes a structural directive

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

Top

Index

enhancing ngIf with an Else condition
    <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>   
        

Top

Index

styling elements dynamically with ngStyle
attribute directives only change the element they are placed on

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

Top

Index

applying CSS classes dynamically with ngClass
inline style
    @Component({
        selector: 'app-server',
        templateUrl: './server.component.html',
        styles: [`
            .online{
                color: green;
            }
        `]
    })
    export class ServerComponent { }
        
used in markup as
    <label 
        [ngStyle]="{backgroundColor: getColor()}" 
        <!-- [ngClass] = "{CSS class: CSS property === boolean expression}"; -->
        [ngClass]="{online: serverStatus === 'online'}">
        Server with ID of {{ serverId }} is {{ getServerStatus() }}.
    </label>
        

Top

Index

outputting lists with ngFor
    ...
    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 = '';
        }
        ...  
    }
        
used in markup to display the list of servers
    <div style="text-align:center;">
        ...
        <app-server *ngFor="let server of servers"></app-server>
    </div>
        

Top

Index

getting the index when using ngFor
    <!-- 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>           
        

Top

Index

hamburger menu
using bootstrap styles
    <!--  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' >
        

Top

Index

c'tor args
Angular automagicly converts c'tor args into class members scoped the same as the accessor
    export class Ingredient {
        constructor(public name: string, public amount: string) {}
    }        
        

Top

Index

n4jvp.com