Skip to content

Commit c909850

Browse files
tuxcy17tuxcy17
committed
angular4 tutorial
result of 3 first chapter, to finish before moving to something much more fun !
1 parent 3ed0bdf commit c909850

File tree

5 files changed

+101
-60
lines changed

5 files changed

+101
-60
lines changed

‎src/app/app.component.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.selected {
2+
background-color: #CFD8DC !important;
3+
color: white;
4+
}
5+
.heroes {
6+
margin: 0 0 2em 0;
7+
list-style-type: none;
8+
padding: 0;
9+
width: 15em;
10+
}
11+
.heroes li {
12+
cursor: pointer;
13+
position: relative;
14+
left: 0;
15+
background-color: #EEE;
16+
margin: .5em;
17+
padding: .3em 0;
18+
height: 1.6em;
19+
border-radius: 4px;
20+
}
21+
.heroes li.selected:hover {
22+
background-color: #BBD8DC !important;
23+
color: white;
24+
}
25+
.heroes li:hover {
26+
color: #607D8B;
27+
background-color: #DDD;
28+
left: .1em;
29+
}
30+
.heroes .text {
31+
position: relative;
32+
top: -3px;
33+
}
34+
.heroes .badge {
35+
display: inline-block;
36+
font-size: small;
37+
color: white;
38+
padding: 0.8em 0.7em 0 0.7em;
39+
background-color: #607D8B;
40+
line-height: 1em;
41+
position: relative;
42+
left: -1px;
43+
top: -4px;
44+
height: 1.8em;
45+
margin-right: .8em;
46+
border-radius: 4px 0 0 4px;
47+
}

‎src/app/app.component.html‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/app/app.component.ts‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,53 @@
11
import { Component } from '@angular/core';
22

3+
4+
export class Hero {
5+
id: number;
6+
name: string;
7+
}
8+
9+
const HEROES: Hero[] = [
10+
{ id: 11, name: 'Mr. Nice' },
11+
{ id: 12, name: 'Narco' },
12+
{ id: 13, name: 'Bombasto' },
13+
{ id: 14, name: 'Celeritas' },
14+
{ id: 15, name: 'Magneta' },
15+
{ id: 16, name: 'RubberMan' },
16+
{ id: 17, name: 'Dynama' },
17+
{ id: 18, name: 'Dr IQ' },
18+
{ id: 19, name: 'Magma' },
19+
{ id: 20, name: 'Tornado' }
20+
];
21+
22+
23+
324
@Component({
425
selector: 'app-root',
5-
templateUrl: './app.component.html',
26+
template: `
27+
<h1>{{title}}</h1>
28+
<ul class="heroes">
29+
<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
30+
<span class="badge">{{hero.id}}</span> {{hero.name}}
31+
</li>
32+
</ul>
33+
<div *ngIf="selectedHero">
34+
<h2>{{selectedHero.name}} details!</h2>
35+
<div><label>id: </label>{{selectedHero.id}}</div>
36+
<div>
37+
<label>name: </label>
38+
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
39+
</div>
40+
</div>
41+
`,
642
styleUrls: ['./app.component.css']
743
})
44+
845
export class AppComponent {
9-
title = 'app';
46+
title = 'Tour of Heroes';
47+
heroes = HEROES;
48+
selectedHero: Hero;
49+
50+
onSelect(hero: Hero): void {
51+
this.selectedHero = hero;
52+
}
1053
}

‎src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
34

45
import { AppComponent } from './app.component';
56

@@ -8,7 +9,8 @@ import { AppComponent } from './app.component';
89
AppComponent
910
],
1011
imports: [
11-
BrowserModule
12+
BrowserModule,
13+
FormsModule
1214
],
1315
providers: [],
1416
bootstrap: [AppComponent]

‎yarn.lock‎

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1288,13 +1288,7 @@ date-now@^0.1.4:
12881288
version "0.1.4"
12891289
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
12901290

1291-
debug@*:
1292-
version "3.0.0"
1293-
resolved "https://registry.yarnpkg.com/debug/-/debug-3.0.0.tgz#1d2feae53349047b08b264ec41906ba17a8516e4"
1294-
dependencies:
1295-
ms "2.0.0"
1296-
1297-
debug@2, [email protected], debug@^2.2.0, debug@^2.6.3, debug@^2.6.8:
1291+
debug@*, debug@2, [email protected], debug@^2.2.0, debug@^2.6.3, debug@^2.6.8:
12981292
version "2.6.8"
12991293
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
13001294
dependencies:
@@ -3571,7 +3565,7 @@ os-locale@^2.0.0:
35713565
lcid "^1.0.0"
35723566
mem "^1.1.0"
35733567

3574-
os-tmpdir@^1.0.0, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
3568+
os-tmpdir@^1.0.0, os-tmpdir@~1.0.1:
35753569
version "1.0.2"
35763570
resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
35773571

@@ -4117,14 +4111,10 @@ punycode@^1.2.4, punycode@^1.4.1:
41174111
version "1.4.1"
41184112
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
41194113

4120-
[email protected]:
4114+
[email protected], q@^1.1.2, q@^1.4.1:
41214115
version "1.4.1"
41224116
resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
41234117

4124-
q@^1.1.2, q@^1.4.1:
4125-
version "1.5.0"
4126-
resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
4127-
41284118
qjobs@^1.1.4:
41294119
version "1.1.5"
41304120
resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
@@ -5042,18 +5032,12 @@ [email protected]:
50425032
dependencies:
50435033
os-tmpdir "~1.0.1"
50445034

5045-
[email protected], tmp@^0.0.31:
5035+
[email protected], tmp@0.0.x, tmp@^0.0.31:
50465036
version "0.0.31"
50475037
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
50485038
dependencies:
50495039
os-tmpdir "~1.0.1"
50505040

5051-
[email protected]:
5052-
version "0.0.33"
5053-
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
5054-
dependencies:
5055-
os-tmpdir "~1.0.2"
5056-
50575041
[email protected]:
50585042
version "0.1.4"
50595043
resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
@@ -5160,15 +5144,7 @@ type-is@~1.6.15:
51605144
media-typer "0.3.0"
51615145
mime-types "~2.1.15"
51625146

5163-
"typescript@>=2.0.0 <2.5.0":
5164-
version "2.4.2"
5165-
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
5166-
5167-
typescript@^2.3.3:
5168-
version "2.5.1"
5169-
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.1.tgz#ce7cc93ada3de19475cc9d17e3adea7aee1832aa"
5170-
5171-
typescript@~2.3.3:
5147+
"typescript@>=2.0.0 <2.5.0", typescript@^2.3.3, typescript@~2.3.3:
51725148
version "2.3.4"
51735149
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.4.tgz#3d38321828231e434f287514959c37a82b629f42"
51745150

@@ -5535,20 +5511,13 @@ wrappy@1:
55355511
version "1.0.2"
55365512
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
55375513

5538-
[email protected]:
5514+
[email protected], ws@^1.0.1:
55395515
version "1.1.2"
55405516
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"
55415517
dependencies:
55425518
options ">=0.0.5"
55435519
ultron "1.0.x"
55445520

5545-
ws@^1.0.1:
5546-
version "1.1.4"
5547-
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
5548-
dependencies:
5549-
options ">=0.0.5"
5550-
ultron "1.0.x"
5551-
55525521
[email protected]:
55535522
version "1.0.0"
55545523
resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"

0 commit comments

Comments
 (0)