Skip to content

Commit ab15c70

Browse files
jhadesjhades
committed
Angular Core Deep Dive
1 parent bfa3c88 commit ab15c70

6 files changed

+45
-57
lines changed

‎src/app/app.component.html

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,14 @@
99

1010
<div class="courses">
1111

12-
<course-card *ngFor="let course of courses" (courseSelected)="onCourseSelected($event)"
12+
<course-card *ngFor="let course of courses" (courseChanged)="saveCourse($event)"
1313
[course]="course">
1414

15-
1615
<course-image [src]="course.iconUrl"
1716
*ngxUnless="!course.iconUrl">
1817

1918
</course-image>
2019

21-
<div class="course-description">
22-
{{ course.longDescription }}
23-
</div>
24-
2520
</course-card>
2621

2722
</div>

‎src/app/app.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@ export class AppComponent implements AfterViewInit, OnInit {
4646

4747
}
4848

49-
onCourseSelected(course:Course) {
49+
saveCourse(course:Course) {
50+
51+
console.log('new course', course);
5052

5153
}
5254

‎src/app/course-card/course-card.component.css

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,56 @@
11

22
:host {
3-
display: block;
3+
display: block;
44
}
55

6-
7-
86
:host.is-first {
9-
border-top: 2px solid grey;
10-
padding-top: 20px;
7+
border-top: 2px solid grey;
8+
padding-top: 20px;
119
}
1210

1311
:host.is-last {
14-
border-bottom: 2px solid grey;
15-
padding-top: 20px;
12+
border-bottom: 2px solid grey;
13+
padding-top: 20px;
1614
}
1715

1816
:host.is-even {
19-
background: lightgray;
17+
background: lightgray;
2018
}
2119

22-
2320
:host.is-odd {
24-
background: lightcyan;
21+
background: lightcyan;
2522
}
2623

2724
:host-context(.salmon-theme) .course-card {
28-
background: lightsalmon;
25+
background: lightsalmon;
2926
}
3027

3128
.course-card {
32-
margin-bottom: 40px;
33-
text-align: center;
34-
border-radius: 4px;
35-
padding: 20px 0;
36-
box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .14), 0 4px 8px -1px rgba(0, 0, 0, .12);
29+
margin-bottom: 40px;
30+
text-align: center;
31+
border-radius: 4px;
32+
padding: 20px 0;
33+
box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .14), 0 4px 8px -1px rgba(0, 0, 0, .12);
3734
}
3835

3936
.course-card .course-title {
40-
font-size: 27px;
41-
font-weight: bold;
37+
font-size: 27px;
38+
font-weight: bold;
4239
}
4340

44-
.course-card ::ng-deep .course-description {
45-
max-width: 360px;
46-
margin: 0 auto;
47-
margin-top: 15px;
48-
user-select: none;
41+
.course-card .course-description {
42+
max-width: 360px;
43+
margin: 0 auto;
44+
margin-top: 15px;
45+
user-select: none;
4946
}
5047

51-
48+
.course-card .course-description input {
49+
font-size: 20px;
50+
}
5251

5352
.course-card.beginner {
54-
background: lightsalmon;
53+
background: lightsalmon;
5554
}
5655

5756

‎src/app/course-card/course-card.component.html

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,29 @@
1-
21
<div class="course-card" *ngIf="course" #container>
32

4-
<div class="course-title">
5-
{{ cardIndex || '' + ' ' + course.description }}
6-
</div>
7-
8-
<ng-content select="course-image"
9-
*ngIf="course.iconUrl; else noImage"></ng-content>
10-
11-
<ng-template #noImage>
3+
<div class="course-title">
4+
{{ cardIndex || '' + ' ' + course.description }}
5+
</div>
126

13-
<ng-container
14-
*ngTemplateOutlet="noImageTpl;context: {description:course.description}">
7+
<ng-content select="course-image"
8+
*ngIf="course.iconUrl"></ng-content>
159

16-
</ng-container>
10+
<div class="course-description">
1711

18-
</ng-template>
12+
Edit Title: <input #courseTitle [value]="course.description">
1913

20-
<ng-content select=".course-description"></ng-content>
14+
</div>
2115

22-
<div class="course-category" [ngSwitch]="course.category">
16+
<div class="course-category" [ngSwitch]="course.category">
2317

24-
<div class="category" *ngSwitchCase="'BEGINNER'">Beginner</div>
18+
<div class="category" *ngSwitchCase="'BEGINNER'">Beginner</div>
2519

26-
<div class="category" *ngSwitchCase="'INTERMEDIATE'">Intermediate</div>
20+
<div class="category" *ngSwitchCase="'INTERMEDIATE'">Intermediate</div>
2721

28-
<div class="category" *ngSwitchCase="'ADVANCED'">Advanced</div>
22+
<div class="category" *ngSwitchCase="'ADVANCED'">Advanced</div>
2923

30-
</div>
24+
</div>
3125

32-
<button (click)="onCourseViewed()">View Course</button>
26+
<button (click)="onSaveClicked(courseTitle.value)">Save Course</button>
3327

3428
</div>
3529

‎src/app/course-card/course-card.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export class CourseCardComponent implements OnInit, AfterViewInit, AfterContentI
2727
@Input()
2828
cardIndex: number;
2929

30-
@Output('courseSelected')
30+
@Output('courseChanged')
3131
courseEmitter = new EventEmitter<Course>();
3232

3333
@ContentChildren(CourseImageComponent, {read: ElementRef})
@@ -53,9 +53,9 @@ export class CourseCardComponent implements OnInit, AfterViewInit, AfterContentI
5353
return this.course && this.course.iconUrl;
5454
}
5555

56-
onCourseViewed() {
56+
onSaveClicked(description:string) {
5757

58-
this.courseEmitter.emit(this.course);
58+
this.courseEmitter.emit({...this.course, description});
5959

6060
}
6161

‎src/app/services/courses.service.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ export class CoursesService {
1010

1111
constructor(private http: HttpClient) {
1212

13-
14-
1513
}
1614

1715
loadCourses() {

0 commit comments

Comments
 (0)