Demo Angular

app.component.html

<div id="content">
    <navbar></navbar>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>

dashboard.component.html

<div class="row content">
  <div class="col-sm-2">
      <!--sidebar placeholder-->
  </div>
  <div class="col-sm-10">
    <div class="row">
      <div class="col-sm-12 text-center" *ngIf="!isTicketDetailsRoute()">
        <!--filter-by placeholder-->
        <br>
        <br>
      </div>
      <br/>
      <div class="col-sm-12 child-content">
        <!--child placeholder-->
      </div>
    </div>
  </div>
</div>

group-by.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'groupBy'
})
export class GroupByPipe implements PipeTransform {
    transform(collection: any[], prop: string, filterBy: string){
        let propertiesUniqueArray: any[] = [];
        if(!collection) collection = [];
        if(filterBy) collection = collection.filter(item => item[prop] === filterBy);
        collection.forEach((item)=> {
            let val = item[prop];
            if(propertiesUniqueArray.indexOf(val) === -1)
                propertiesUniqueArray.push(val);
        });
        var groupedBy = propertiesUniqueArray.map((propVal)=>{
            return {
                key: propVal,
                values: collection.filter(item=> item[prop] === propVal)
            };
        })
        return groupedBy;
    }
}

localstorage.service.ts

import { Injectable } from "@angular/core";

//Allow window object to avoid ts compilation error
declare var window: any ;

@Injectable()
export class LocalStorageService {
    constructor(){

    }
    get(key: string){
        return window.localStorage.getItem(key);
    }

    getObject(key: string){
        let value = this.get(key);
        if(value) value = JSON.parse(value);
        return value;
    }

    set(key: string, value: any){
        window.localStorage.setItem(key, value);
    }
}

login.component.css

.wrapper {    
	margin-top: 80px;
	margin-bottom: 20px;
}

.form-signin {
  max-width: 420px;
  padding: 30px 38px 66px;
  margin: 0 auto;
  background-color: #eee;
  border: 3px dotted rgba(0,0,0,0.1);  
  }

.form-signin-heading {
  text-align:center;
  margin-bottom: 30px;
}

.form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
}

input[type="text"] {
  margin-bottom: 0px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="password"] {
  margin-bottom: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.colorgraph {
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

login.component.html

<div class = "container">
	<div class="wrapper">
		<form action="" method="post" name="Login_Form" class="form-signin">       
		    <h3 class="form-signin-heading">Welcome Back! Please Sign In</h3>
			  <hr class="colorgraph"><br>
			  
			  <input type="text" class="form-control" name="Username" placeholder="Username" required="" autofocus="" />
			  <input type="password" class="form-control" name="Password" placeholder="Password" required=""/>     		  
			 
			  <button class="btn btn-lg btn-primary btn-block"  name="Submit" value="Login" type="Submit">Login</button>  			
		</form>			
	</div>
</div>

profile.component.css

.user-row {
  margin-bottom: 14px;
}

.user-row:last-child {
  margin-bottom: 0;
}

.dropdown-user {
  margin: 13px 0;
  padding: 5px;
  height: 100%;
}

.dropdown-user:hover {
  cursor: pointer;
}

.table-user-information > tbody > tr {
  border-top: 1px solid rgb(221, 221, 221);
}

.table-user-information > tbody > tr:first-child {
  border-top: 0;
}

.table-user-information > tbody > tr > td {
  border-top: 0;
}
.toppad{
  margin-top:20px;
}

profile.component.html

<div class="container">
    <div class="row" *ngIf="user">
        <div class="col-md-5  toppad  pull-right col-md-offset-3 ">
            <p class=" text-info"><b>Last Login:</b> {{user.LastLoginDate | date: 'longDate'}}</p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">{{user.FirstName}} {{user.LastName}}</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <form (ngSubmit)="submit()">
                            <fieldset>
                                <div class="col-md-3 col-lg-3 " align="center"> 
                                    <img alt="User Pic" src="http://www.manutd.com/sitecore/shell/~/media/374AA068C74A419EBC844D25CDC93EB2.ashx?w=240&h=311&rgn=0,0,2000,2592" class="img-circle img-responsive" /> 
                                </div>
                                <div class=" col-md-9 col-lg-9 ">
                                    <table class="table table-user-information">
                                        <tbody>
                                            <tr>
                                                <td>First Name:</td>
                                                <td>
                                                    <input class="form-control" placeholder="Enter First Name"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Last Name:</td>
                                                <td>
                                                    <input class="form-control" placeholder="Enter Last Name"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Date of Birth</td>
                                                <td>
                                                    <input class="form-control" type="date"  placeholder="Enter DOB"/>
                                                </td>
                                            </tr>
                                            <tr>
                                            <tr>
                                                <td>Gender</td>
                                                <td>
                                                    <select class="form-control">
                                                        <option>Please select Gender</option>
                                                        <option>Male</option>
                                                        <option>Female</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Street Address</td>
                                                <td>
                                                    <input class="form-control"  placeholder="Enter Stree Address"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>City</td>
                                                <td>
                                                    <select class="form-control">
                                                        <option value="">Please select city</option>
                                                        <option>Birmingham</option>
                                                        <option>Cambridge</option>
                                                        <option>Derby</option>
                                                        <option>Liverpool</option>
                                                        <option>Norwich</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>State</td>
                                                <td>
                                                    <input class="form-control"  placeholder="Enter State"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Phone Number</td>
                                                <td>
                                                    <input type="number" class="form-control"  placeholder="Enter Phone Number"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Pin Code</td>
                                                <td>
                                                    <input type="number" class="form-control"  placeholder="Enter PIN Code"/>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <button type="button" (click)="edit=true" class="btn btn-primary">Edit</button>
                                    <button (click)="edit=false" class="btn btn-primary">Save</button>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

sidebar.component.html

<div class="row">
  <div class="col-sm-12">
    <h4>Task/Bug Tracker</h4>
  </div>
  <div class="col-sm-12">
    <ul class="list-group">
      <li class="list-group-item">
        <-- items here -->
      </li>
    </ul>
  </div>
</div>

ticket-item.component.html

<!--<span class="glyphicon" [ngClass]="{
    'glyphicon-tags': ticket.Type == 'Feature',
    'glyphicon-flash': ticket.Type == 'Bug',
    'glyphicon-arrow-down': ticket.Type == 'Minor'
}">Icon</span>-->
<a>My Ticket</a> Ticket Title
<span class="pull-right">
  <small>
    Priority
  </small>
    <span class="label label-default">10</span>
</span>

ticket-kanban.component.html

<div class="row">
  <div class="col-sm-4 kanban-view border-right">
    <div class="row">
      <div class="col-sm-12">
        <h4 class="text-center">
          Status
        </h4>
      </div>
      <div class="col-sm-12">
        <div class="alert alert-info">
          No <b>Status</b> Item(s)
        </div>
      </div>
      <div class="col-sm-12">
        <div class="well well-sm">
          <table width="100%">
            <small>
              <tr>
                <td width="40px">
                  <a>AM-1</a>
                  <span class="label label-default">Someone</span>
                </td>
                <td>
                  Ticket Title
                </td>
              </tr>
            </small>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

ticket-list.component.html

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">
      <span class="glyphicon" aria-hidden="true">
      </span>
      Person Name
      <span class="badge">5</span>
    </h3>
  </div>
  <div class="panel-body">
    <ul class="list-group">
      <li class="list-group-item">
        <!--ticket-item 's placeholder-->
      </li>
    </ul>
  </div>
</div>

welcome.component.html

<div class="row">
  <div class="container">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">
          Welcome
        </h3>
      </div>
      <div class="panel-body">
        <h4>This is bug tracker application. Here you will be managing all the bugs of your application.</h4>
        <br/>
        <h4>
        <img src="/img/bug_tracker.png" width="100%"/>
        <br>
        <br>
        <b>Technology Used: </b>
        #Angular, #Typescript, #JS, #HTML, #CSS, etc.</h4>
        <br/>
      </div>
    </div>
  </div>
</div>