Search⌘ K
AI Features
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Create Event Service

Explore how to create an Angular event service, including generating service files and models, managing event data, and testing API integration. Understand implementing human-readable date formats and handling error responses to ensure robust event creation functionality.

We'll cover the following...

Now that the interceptor has been created, we can move on to adding an event-creating service for creating events. First, generate the service.

ng g service services/events/events

Then create a model for events.

ng g interface services/events/event
Terminal 1
Terminal
Loading...

The first command ng g service services/events/event creates two files. Below is the expected terminal output.

CREATE src/app/services/events/events.service.spec.ts
CREATE src/app/services/events/events.service.ts

The second command ng g interface services/events/event creates one file. Below is the expected terminal output.

CREATE src/app/services/events/event.ts

Below is our updated code after running the above two commands. Use this to make further changes in the lesson.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Events service

Event model

Update the event model with the properties shown below.

TypeScript 3.3.4
// src/app/services/event/event.ts
export interface Event {
  _creator: string;
  title: string;
  description?: string;
  city: string;
  state: string;
  startTime: string;
  endTime: string;
  suggestLocations: Boolean;
  members?: Array<any>;
  displayStart?: string;
  displayEnd?: string;
  start?: Date;
  end?: Date;
  color?: object;
  _id?: string;
  __v?: any;
}

Within this model, we have three groups of properties, ...