17. Rendering of HTML

Rendering of HTML

ngIf // hide or show part of a view depending on some condition for e.g.
show lost of courses or show no courses yet

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
        <div *ngIf="courses.length > 0">
            List of Courses
        </div>
        <div *ngIf="courses.length == 0">
            No courses enrolled.
        </div>
    `       
})
export class AppComponent {
    courses = [];
}

ngSwitch 

To display an element and its children from a set of possible elements based on a condition.

For e.g.

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
        <ul class="nav nav-pills">
            <li [class.active]="viewMode == 'map'"><a (click)="viewMode = 'map'">Map View</a></li>
            <li [class.active]="viewMode == 'list'"><a (click)="viewMode = 'list'">List View</a></li>
        </ul>        
        <div [ngSwitch]="viewMode">
            <template [ngSwitchWhen]="'map'" ngSwitchDefault>Map View Content</template>
            <template [ngSwitchWhen]="'list'">List View Content</template>
        </div>
    `       
})
export class AppComponent {
    viewMode = 'map';

}

ngFor

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
        <ul>
            <li *ngFor="#course of courses, #i = index">
                {{i+1}} - {{course}}
            </li>            
        </ul>        
    `       
})
export class AppComponent {
    courses = ['Course1','Course2','Course3'];

}

Pipes - used to format data

Built in pipes: Uppercase, lowercase, decimal, currency, date, json

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
        {{course.title | uppercase | lowercase}}
        <br />
        {{course.students | number}}
        <br />
        {{course.rating | number: '2.2-2'}}
        <br />
        {{course.price | currency:'AUD':true:'2.2-2'}}
        <br />
        {{course.releaseDate | date:'MMM yyyy'}}
        <br />
        {{course | json}}
    `       
})
export class AppComponent {
    course = {
        title: "Angular 2 for beginners",
        rating: 4.345,
        students: 2344,
        price:99.93,
        releaseDate: "Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)"
    }

}

Creating Custom Pipes


new file. summary.pipe.ts [cannot work]

import {Pipe,PipeTransform} from '@angular/core';

@Pipe({name:'summary'})
export class SummaryPipe implements PipeTransform{
    tranform(value: string, args:string[]){
        var limit = (args && args[0]) ? parseInt(args[0]) : 50; 

        if(value)
            return value.substring(0,limit) + "...";
    }

}

app.component.ts

import { Component } from '@angular/core';
import {SummaryPipe} from './summary.pipe';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
        {{post.title}}
        <br />
        {{post.body | summary:10}}
    `,
    pipes: [SummaryPipe]       
})
export class AppComponent {
    post = {
        title: "Angular tutorial for beginners",
        body: `
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        `    
    }
}

NgClass

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

@Component({
  selector: 'favorite',
  template: // demonstrate class bindings below 
  `
  <i
    class="glyphicon"
    [class.glyphicon-star-empty]="!isFavorite" 
    [class.glyphicon-star]="isFavorite"
    [ngClass]=""{
      'glyphicon-star-empty': !isFavorite,
      'glyphicon-star-star': isFavorite
    }
    (click)="onClick()">
  </i>
  `
})

export class FavoriteComponent { 
  isFavorite = false;

  onClick(){
      this.isFavorite = !this.isFavorite;
  }

} 

Elvis Operator

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
        <ul>
            <li>Title: {{task.title}}</li>
            <li>Assigned to: {{task.assignee?.role?.name}} </li>
        </ul>
    `       
})
export class AppComponent {
    task = {
        title: "Review applications",
        assignee: null
    }

}

ng-content 

note: Need bootstrap
http://getbootstrap.com/getting-started/#download

add below to index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

when you need to insert content into template from the outside

add new file bootstrap.panel.component.ts

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

@Component({
  selector: 'bs-panel', // use 'bs-' to make sure no clashes in name
  // from boostrap website
  template: `
        <div class="panel panel-default"> 
            <div class="panel-heading">
                <ng-content select=".heading"></ng-content>
            </div>
            <div class="panel-body">
                <ng-content select=".body"></ng-content>
            </div>
        </div>    
    `       
})
export class BootstrapPanel {

}

app.component.ts

import { Component } from '@angular/core';
import {BootstrapPanel} from './bootstrap.panel.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  directives: [BootstrapPanel],
  template: `
        <bs-panel>
            <div class="heading">This is the heading!</div>
            <div class="body">This is the body!</div>
            <div class="body">This is another body!</div>
        </bs-panel>
    `       
})
export class AppComponent {
    title = "Hello";

}

Implement Zippy Reusable component

zippy.component.ts

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

@Component({
  selector: 'zippy',
    styles: [`
        .zippy {
            border: 1px solid #ccc;
            border-radius: 2px;
        }
        
        .zippy .zippy-title {
            padding: 20px;
            font-weight: bold;
        }
        
        .zippy .zippy-title:hover{
            background: #f0f0f0;
            cursor: pointer;
        }
        
        .zippy .zippy-content {
            padding: 20px;
        }
    `],  
  template: `
    <div class="zippy">
        <div class="zippy-title" (click)="toggle()">
            {{title}}
            <i class="pull-right glyphicon"
                [ngClass]="{
                    'glyphicon-chevron-down': !isExpanded,
                    'glyphicon-chevron-up': isExpanded
                }">
            </i>
        </div>
        <div *ngIf="isExpanded" class="zippy-content">
            <ng-content></ng-content>
        </div>
    </div>
    `       
})

export class ZippyComponent {
    isExpanded = false; // tracks if Zippy is expanded or not
    @Input() title: string;

    toggle(){
        this.isExpanded = !this.isExpanded;
    }


}

app.component.ts

import { Component } from '@angular/core';
import { ZippyComponent } from './zippy.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  directives:[ZippyComponent],
  template: `
        <zippy title="Who can see my stuff?">
            Content 123
        </zippy>
        <zippy title="Who can touch my stuff?">
            Content 345
        </zippy>        
    `       
})
export class AppComponent {


}