Skip to content
Commits on Source (2)
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 954250fb
......@@ -913,6 +913,11 @@
"hoek": "2.16.3"
}
},
"bootstrap": {
"version": "4.0.0-beta",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.tgz",
"integrity": "sha512-I/r3fYtUZr+rUNkh8HI+twxZ56p6ehNn27eA1XSebLVQKAJ2xZHnEvZrSR+UR2A/bONcd9gHC3xatVhQlH6R6w=="
},
"brace-expansion": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
......
src/app/app.component.html
View file @ 954250fb
<h1>
Welcome to {{title}}!
</h1>
<nav>
<h1>
Welcome to {{title}}!
</h1>
</nav>
<h2>Contacts</h2>
<ul>
<li
*ngFor="let contact of contacts"
(click)="selectContact(contact)"
[class.selected]="isSelected(contact)">
{{contact.name}}
</li>
</ul>
<aside>
<h2>Contacts</h2>
<ul>
<li
*ngFor="let contact of contacts"
(click)="selectContact(contact)"
[class.selected]="isSelected(contact)">
{{contact.name}}
</li>
</ul>
<div *ngIf="selectedContact">
<h2>New Contact</h2>
<form (submit)="addContact()">
<input
type="text"
name="name"
[(ngModel)]="contactName">
<button type="submit">
Add contact {{contactName}}
</button>
</form>
</aside>
<main *ngIf="selectedContact">
<h2>{{selectedContact.name}}</h2>
<input
type="text"
[(ngModel)]="selectedContact.name">
</div>
<h2>New Contact</h2>
<form (submit)="addContact()">
<input
type="text"
name="name"
[(ngModel)]="contactName">
<button type="submit">
Add contact {{contactName}}
</button>
</form>
</main>
src/app/app.component.scss
View file @ 954250fb
@import '../styles';
:host {
@include make-row();
}
nav {
@extend .col-12;
@extend .navbar;
@extend .navbar-light;
@extend .bg-light;
}
h1 {
color: blueviolet;
@extend .navbar-brand;
}
h2 {
margin-top: 20px;
}
aside {
@extend .col-4;
}
main {
@extend .col-8;
}
input[type="text"] {
@extend .form-control;
}
button {
@extend .btn;
@extend .btn-primary;
}
ul {
@extend .list-group;
}
ul>li {
@extend .list-group-item;
}
li {
......@@ -7,5 +49,9 @@ li {
}
li.selected {
background-color: lightblue;
@extend .active
}
form button {
margin-top: 10px;
}
src/index.html
View file @ 954250fb
......@@ -9,6 +9,8 @@
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<div class="container-fluid">
<app-root></app-root>
</div>
</body>
</html>
src/styles.scss
View file @ 954250fb
/* You can add global styles to this file, and also import other style files */
@import '../node_modules/bootstrap/scss/bootstrap';