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({ |
NewerOlder