Angular 4 update index page after create

I am building a concert Event site. Currently I have an event index page and an event create page. After I create an event I redirect back to the index page but the new event does not show up unless I refresh the index page. I would like the new event to appear automatically after I submit/create the new event. I tried sharing data between components but that did not seem to work. I don't really know what the right approach is for this.

event-routing.module.ts

const routes: Routes = [
  { path: 'event', component: EventIndexComponent },
  { path: 'event/create', component: EventCreateComponent },
  { path: 'event/edit/:id', component: EventCreateComponent }
];

event-create.component.ts

export class EventCreateComponent implements OnInit {
...
ngOnInit(): void {
  this.getVenues();
}

getVenues(){
  this.venueService.query().subscribe(
    venues => {
      this.venues = venues;
    },
    err => {
      console.log(err);
    }
  );
}

onSubmit() {
  if (this.eventForm.valid) {
    let date: Date = new Date(this.eventForm.controls['date'].value);
    let time: Date = new Date(this.eventForm.controls['time'].value);

    let event: Event = new Event(
      null,
      null,
      this.eventForm.controls['venue'].value,
      this.formatTimestamp(date, time),
      this.eventForm.controls['title'].value,
      this.eventForm.controls['description'].value
    );

    this.eventService.save(event).subscribe();

    this.router.navigate(['/event']);
   }
}

event-index.component.ts

export class EventIndexComponent implements OnInit {
  event: Event;

  private events: Event[];

  constructor(
    private router: Router,
    private eventService: EventService
  ) { }

  ngOnInit() {
    this.getEvents();
  }

  getEvents(){
    this.eventService.query().subscribe(
      events => {
        this.events = events;
      },
      err => {
        console.log(err);
      }
    )
  }

event.service.ts

@Injectable()
export class EventService {

  private apiUrl = 'http://localhost:3000/events';

  constructor(private http: HttpClient) {}

  query(): Observable<Event[]>{
    return this.http.get(this.apiUrl).map(item => item as Event[]);
  }

  get(id: number): Observable<Event>{
    return null;
  }

  save(event: Event): Observable<Event>{
    return this.http.post<Event>(this.apiUrl, event);
  }

  delete(event: Event): Observable<Event>{
    return this.http.delete<Event>(this.apiUrl + '/' + event.id);
  }

  update(event: Event): Observable<Event>{
    return null;
  }
}