First test page

Dit is een eerste test pagina om te zien hoe hier de layout van HTML, Javascript, CSS kan worden weergegeven m.b.v. prism Syntax.

Html

 <h1>Hello World!</h1>

typescript\javascript

import {Component, EventEmitter } from 'angular2/core';  
import { RouterLink, RouteParams } from 'angular2/router';  
import { Student } from '../models/student';  
import { StudentFormatter } from '../pipes/studentFormatter';  
import { StudentService } from '../services/studentservice';

@Component({
    selector: 'student-card',
    inputs: ['student'],
    pipes: [StudentFormatter],
    template: `
    <div class="dialog light-primary-color text-primary-color" *ngIf="student"><div [ngClass]="{defaultPrimaryColor:true}"> 
    {{ student.firstname }} {{ student.lastname }}</div>
    <p> Address: {{ student.address }} <br/> Phone: {{ student.phone }} </p></div>
    `,
    styles: [`
    .dialog { border:1px solid black;};
    .header { margin-top:0px;}
    `]
})
export class StudentCard {  
    student: Student;
    constructor(studentservice: StudentService, routeParams: RouteParams) {
        studentservice.getStudentById(parseInt(routeParams.params['id']))
            .subscribe(student => {
                this.student = student;
                console.log(`selected student ${this.student}`);
            });
    }
}    

CSS

.dark-primary-color    { background: #303F9F; }
.default-primary-color { background: #3F51B5; }
.defaultPrimaryColor { background: #3F51B5; }
.light-primary-color   { background: #C5CAE9; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #448AFF; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #727272; }
.divider-color         { border-color: #B6B6B6; }

* { font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;}
.selected { background-color:red; }
.student { padding:15px; }
strong, b{ font-weight: 600;}