Skip to content

Instantly share code, notes, and snippets.

Siraj Gadhia SirajGadhia

Block or report user

Report or block SirajGadhia

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
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({
You can’t perform that action at this time.