Component

INLINE Component

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    template: '<p> Hello {{ name }}!</p>',
    styles: [`
        p {
            color: red
        }
    `]
})
export class HelloComponent implements OnInit {
    name: string = 'World';
    ngOnInit() {

    }
}

Normal Component

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    name: string = 'World';
    ngOnInit() {

    }
}

:host {
    background: #f00;
}

hello.component.css

TEMPLATE

SIMPLE TEMPLATE

<p>
    hello works!
</p>

hello.component.html

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    ngOnInit() {

    }
}

hello.component.ts

VARIABLES

<p>
    hello {{ name }}!
</p>
<img src="{{ url }}" alt="Angular" />

hello.component.html

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    name = 'Angular';
    url = 'https....'

    ngOnInit() {

    }
}

hello.component.ts

PROPERTIES

<button [disabled]="isDisabled">Save</button>
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<div [class.special]="isSpecial">The class binding is special</div>
<div [ngClass]="{special: isSpecial}">I am special</div>
<input [value]="imageUrl">

hello.component.html

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    isDisabled: boolean = true;
    imageUrl = 'http....';
    isSpecial = true;

    ngOnInit() {

    }
}

hello.component.ts

EVENTS

<button (click)="onClick()">Click me</button>

<p> {{ counter }} </p>

hello.component.html

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    counter = 0

    ngOnInit() {

    }

    onClick() {
        this.counter++;
    }
}

hello.component.ts

Basic structural directives

ngif

<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>

-----------

<div template="ngIf nullHero">{{nullHero.name}}</div>

<ng-template [ngIf]="nullHero">
  {{nullHero.name}}
</ng-template>


--------------

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>
    Alternate text while primary text is hidden
</ng-template>

hello.component.html

ngFOR

<ul>
  <li *ngFor="let contact of contacts">
    {{ contact.name }}
  </li>
</ul>

-----------

<ul>
  <li *ngFor="let contact of contacts | async; trackBy: trackById;">
    {{ contact.name }}
  </li>
</ul>


--------------

<ul>
  <li *ngFor="let contact of contacts; let i = index; let c = count;">
    Index: {{ i }}
    Count: {{ c }}
    {{ contact.name }}
  </li>
</ul>

--------------

<ul>
  <ng-template ngFor let-contact [ngForOf]="contacts">
    <li>
    {{ contact.name }}
    </li>
  </ng-template>
</ul>

hello.component.html

trackById(index, contact) {
  return contact.id;
}

Input / OUTPUT

INPUT

<hello-child [name]="ourName"></hello-child>

hello.component.html

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    ourName = 'Angular';

    ngOnInit() {

    }
}

hello.component.ts

<p> {{ name }} </p>

hello-child.component.html

import {Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'hello-child',
    templateUrl: './hello-child.component.html',
    styleUrls: ['./hello-child.component.css']
})
export class HelloChildComponent implements OnInit {
    @Input() name: string;

    ngOnInit() {

    }
}

hello-child.component.ts

OUTPUT

<hello-child (clicked)="onClicked($event)">
</hello-child>
{{ childCounter }}

hello.component.html

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    childCounter = 0;

    ngOnInit() {

    }

    onClicked(counter: number) {
        this.childCounter = counter;
    }
}

hello.component.ts

<button (click)="onClick()">
    Clicked
</button>

hello-child.component.html

import {Component, Output, OnInit} from '@angular/core';

@Component({
    selector: 'hello-child',
    templateUrl: './hello-child.component.html',
    styleUrls: ['./hello-child.component.css']
})
export class HelloChildComponent implements OnInit {
    @Output() clicked = new EventEmitter();
    counter = 0;

    ngOnInit() {

    }

    onClick() {
        this.counter++;
        this.clicked.emit(this.counter);
    }
}

hello-child.component.ts