Skip to content

U
UsersDojoNg
Commit 14bca496 by Harangozó Péter
Options

added bootsrap themes

parent 1d5c25ab
Showing with 69 additions and 18 deletions
package.json
......@@ -20,6 +20,7 @@
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "^3.4.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.21",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
......
src/app/app.component.html
<h1>
{{title}}
</h1>
<router-outlet></router-outlet>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary bg-faded ">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Users Dojo Angular2 TS</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="users" routerLinkActive="active">Users</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<hr>
<router-outlet></router-outlet>
<hr>
</div>
\ No newline at end of file
src/app/app.component.less
.main-content{
width: 95%;
margin: auto;
}
\ No newline at end of file
src/app/app.module.ts
......@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
......
src/app/modules/users/services/user.service.ts
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { User } from './User';
import { User } from '../models/user';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class UserService {
......
src/app/modules/users/users.component.html
<ul class="users">
<li *ngFor="let user of users">
<span class="badge">{{user.id}}</span>
<span>{{user.UserName}}</span>
</li>
</ul>
\ No newline at end of file
<h2>Users</h2>
<hr>
<button type="button" class="btn btn-sm btn-outline-primary">Add User</button>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<th scope="row">{{user.id}}</th>
<td>{{user.FirstName}}</td>
<td>{{user.LastName}}</td>
<td>{{user.UserName}}</td>
<td>
<button type="button" class="btn btn-sm btn-outline-warning">Edit</button>
<button type="button" class="btn btn-sm btn-outline-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
\ No newline at end of file
src/app/modules/users/users.component.ts
......@@ -19,10 +19,7 @@ export class UsersComponent implements OnInit {
getUsers(): void {
this.userService
.getUsers()
.then(users => {
debugger;
this.users = users
});
.then(users => this.users = users);
}
ngOnInit() {
......
src/index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>UsersDojoNg</title>
<base href="/">
......@@ -8,7 +17,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
<app-root></app-root>
</body>
</html>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment