SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
<div class="row">
    <div class="jumbotron bg-inverse" style="background-color:#eb7d00">
        <div class="container">
            <h5><b><span class="label label-primary label-pill">Let's Do Something Awesome!</span></b></h5>
            <h1 class="display-3">ng2 & BS4 in action!</h1>
            <h4>A sample single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).</h4>
            <h4>
                Code snippets/files are at <a class="label label-danger" 
                                              href="https://gist.github.com/SirajGadhia"

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
import { Component, View, Input, Output, EventEmitter } from 'angular2/core';
import { CORE_DIRECTIVES, NgClass } from 'angular2/common';


@Component({
    selector: 'rating'
})

@View({

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
import { Component } from 'angular2/core';
import { RouterLink } from 'angular2/router';
import { RatingComponent } from '../rating/rating.component';


@Component({ 
  selector: 'home',
  templateUrl: 'app/components/home/home.component.html',
  directives: [RouterLink, RatingComponent]

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha). 
import { Injectable } from 'angular2/core';
import {Employees} from '../data/data.employees';
import {Courses} from '../data/data.courses';

@Injectable()
export class DataService {

    constructor() { }
    

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha). 
<div class="row p-a-1">
    <h4 class="text-primary">ETMS : Employee Training Managment System.</h4>
</div>
<div *ngFor="#employee of employees; #idx = index" >
    <employee [employee] ="employee" [sr-no]="idx"></employee>
</div>

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha). 
import { Component } from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { EmployeeComponent } from '../employee/employee.component';
import { DataService } from '../../services/data.service';

@Component({ 
    selector: 'employee-list',
    directives: [CORE_DIRECTIVES, EmployeeComponent],
    providers: [DataService],

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).               
<div class="card" >
        <div class="card-header card-primary" [class.card-danger]="employee.isAllPending" 
             [class.card-success]="employee.isAllCompleted" 
             style="color:#ffffff !important;">
            <a *ngIf="!employee.isShowCourses" (click)="employee.isShowCourses = !employee.isShowCourses" 
               class="btn btn-sm btn-secondary">
                <i class="fa fa-chevron-up"></i>
            </a>
            <a *ngIf="employee.isShowCourses" (click)="employee.isShowCourses = !employee.isShowCourses" 

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
import { Component, Input } from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { RouterLink } from 'angular2/router';

@Component({
    selector: 'employee',
    templateUrl: 'app/components/employee/employee.component.html',
    directives: [CORE_DIRECTIVES, RouterLink]
})

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
<header></header> 
<main class="container-fluid" >      
   <router-outlet></router-outlet>
</main>
<fotter></fotter>

SirajGadhia

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { HomeComponent } from '../home/home.component';
import { FotterComponent } from '../menu/fotter.component';
import { HeaderComponent } from '../menu/header.component';
import { EmployeeListComponent } from '../employee/employeeList.component';


@Component({