Angular Core Deep Dive Course

Author: Your Name

Diff for: src/app/app.component.html

@@ -13,9 +13,9 @@
 
   </div>
 
-  <div class="courses" *ngIf="courses[0] as course">
+  <div class="courses">
 
-    <course-card
+    <course-card *ngFor="let course of  courses | filterByCategory: 'ADVANCED' "
                  (courseChanged)="save($event)"
                  type="beginner"
                  [course]="course">

Diff for: src/app/courses/courses.module.ts

@@ -6,6 +6,7 @@ import {CoursesService} from './courses.service';
 import {HighlightedDirective} from './directives/highlighted.directive';
 import {NgxUnlessDirective} from './directives/ngx-unless.directive';
 import {HttpClientModule} from '@angular/common/http';
+import {FilterByCategoryPipe} from './filter-by-category.pipe';
 
 @NgModule({
   imports: [
@@ -15,11 +16,13 @@ import {HttpClientModule} from '@angular/common/http';
       CourseCardComponent,
       CourseImageComponent,
       HighlightedDirective,
-      NgxUnlessDirective
+      NgxUnlessDirective,
+      FilterByCategoryPipe
   ],
     exports: [
         CourseCardComponent,
-        CourseImageComponent
+        CourseImageComponent,
+        FilterByCategoryPipe
     ],
     providers: [CoursesService]
 })

Diff for: src/app/courses/filter-by-category.pipe.ts

@@ -0,0 +1,16 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {Course} from '../model/course';
+
+
+@Pipe({
+    name: 'filterByCategory'
+})
+export class FilterByCategoryPipe implements PipeTransform {
+
+
+    transform(courses: Course[], category:string) {
+
+        return courses.filter(course => course.category === category);
+    }
+
+}