View 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"
View 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({
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]
View 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() { }
View 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>
View 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],
View 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"
View 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]
})
View 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>
View 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({