SirajGadhia’s gists

## home.component.html
//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"

## rating.component.ts
//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({

## home.component.ts
//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]

## data.service.ts
//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() { }


## employeelist.component.html
//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>

## employeelist.component.ts
//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],

## employee.component.html
//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"

## employee.component.ts
//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]
})

## app.component.html
//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>

## app.component.ts
//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({