I have been working on an application to display various events, but I am encountering an issue. Whenever I load the webpage, it appears empty and the console throws an error saying 'Can't bind to 'ngForEvent' since it isn't a known property of 'div'. How can I resolve this so that the events show up on the webpage?
events-list.component.ts
import { Component } from '@angular/core'
@Component({
selector: 'events-list',
template: `
<div>
<h1>Upcoming Angular Events</h1>
<hr/>
<div class="row">
<div *ngFor="Let event of events" class="col-md-5">
<event-thumbnail [event]="event"></event-thumbnail>
</div>
</div>
</div>
`
})
export class EventsListComponent {
events = [
{
id: 1,
name: 'Angular Connect',
date: '9/26/2036',
time: '10:00 am',
price: 599.99,
imageUrl: '/assets/images/angularconnect-shield.png',
location: {
address: '1057 DT',
city: 'London',
country: 'England'
},
sessions: [
{
id: 1,
name: "Using Angular 4 Pipes",
presenter: "Peter Bacon Darwin",
duration: 1,
level: "Intermediate",
abstract: `Learn all about the new pipes in Angular 4, both
how to write them, and how to get the new AI CLI to write
them for you. Given by the famous PBD, president of Angular
University (formerly Oxford University)`,
voters: ['bradgreen', 'igorminar', 'martinfowler']
}
}
}