[Fixed] How to load webpage

Issue

I’m creating a web application with Angular Fundamentals but when I tried to run it, I get an error saying ‘Expected 0 arguments, but got 1.’ Here is my event-details.component.ts file

import { Component } from '@angular/core'
import { EventService} from '../shared/event.service'
import { ActivatedRoute } from '@angular/router'

@Component({
templateUrl: './event-details.component.html',
styles: [`
    .container { padding-left: 20px; padding-right: 20px }
    .event-image { height: 100px; }
`]
})
export class EventDetailsComponent {
event:any

constructor(private eventService:EventService, private route:ActivatedRoute) {

}
ngOnInit() {
    /** The error is here */
    this.event = this.eventService.getEvents(+this.route.snapshot.params['id']) 
}

}

And here is my event.service.ts file

import { Injectable } from '@angular/core'

@Injectable()
export class EventService {
    getEvents() {
        return EVENTS
    }

getEvenr(id:number) {
  return EVENTS.find(event => event.id === id)
  }
}
const 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'
    }
]

Solution

The getEvents method of EventService is not supposed to receive an argument.

getEvents() {
  return EVENTS;
}

However, you call it with an argument

this.event = this.eventService.getEvents(+this.route.snapshot.params['id']);

Either call it without an argument

this.event = this.eventService.getEvents();

or change the getEvents() method to accept and use an argument.