Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unexpected token |

See original GitHub issue

So after implementing i keep getting this error any ideas whats wrong

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Parser Error: Unexpected token | at column 29 in [ngFor let course of courses | paginate: { itemsPerPage: 2, currentPage: p }] in CourseListComponent@10:28 ("
</div>
<div class="row">
    <div class="list-group" [ERROR ->]*ngFor="let course of courses | paginate: { itemsPerPage: 2, currentPage: p }">
        <a href="#" c"): CourseListComponent@10:28

heres corelistcomponenets

import {Component} from 'angular2/core';
import {Api} from "../../../services/api";
import {CourseRemoveComponent} from "../remove/CourseRemoveComponent"
import {PaginatePipe, PaginationControlsCmp, PaginationService} from 'ng2-pagination';


import {
    ROUTER_DIRECTIVES
} from 'angular2/router';

@Component({
    selector: 'course',
    templateUrl: './app/components/courses/list/index.html',
    directives: [ROUTER_DIRECTIVES, CourseRemoveComponent, PaginationControlsCmp],
    pipes: [PaginatePipe],
    providers: [PaginationService]    
})

export class CourseListComponent {
    courses: Object;
    selectedCourse: Object = {};
    constructor(private _api: Api) {
        this.courses = this._api.courses$;
        this._api.getCourses();
    }
}

and the template

<div class="row">
    <h5 class="text-center text-muted">Course List</h5>
    <hr>
    <div class="pull-right" style="margin-bottom: 10px;">
        <button class="btn btn-md btn-success" [routerLink]="['CourseCreate']">
            Add new course
        </button>
    </div>
</div>
<div class="row">
    <div class="list-group" *ngFor="let course of courses | paginate: { itemsPerPage: 2, currentPage: p }">
        <a href="#" class="list-group-item clearfix">
            <span class="glyphicon glyphicon-file"></span>
            Author: {{ course.author }}, Name: {{ course.name }}, Price: {{ course.price }}
            <span class="pull-right">

                <button class="btn btn-md btn-success" [routerLink]="['CourseDetail', {id:course.id}]">
                    <span class="glyphicon glyphicon-search"></span>
                </button>

                <button class="btn btn-md btn-info" [routerLink]="['CourseEdit', {id:course.id}]">
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>

                <button href="#remove-course" data-toggle="modal" class="btn btn-md btn-danger" (click)="selectedCourse = course">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
          </span>
        </a>
    </div>
    <course-remove [course]="selectedCourse"></course-remove>
</div>
<pagination-controls  id="some_id"
                      (pageChange)="pageChanged($event)"
                      maxSize="9"
                      directionLinks="true"
                      autoHide="true">
</pagination-controls>