TypeError: Cannot read properties of undefined (reading 'detail')

Question

When I try running my code I get this error.

I have no idea why. I have tried changing it to try and get it to work but it just refuses.

I'm trying to switch between ion-segments and display data from firebase storage.

Discover.page.html:

<ion-content class="ion-padding">
  <ion-segment value="artist" [(ngModel)]="switchSegment" (click)="onFilterUpdate()">
    <ion-segment-button value="viewArtist">Artist</ion-segment-button>
    <ion-segment-button value="viewVenue">Venue</ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="switchSegment">
    <div *ngSwitchCase="'viewArtist'">
  <ion-grid *ngIf="relevantArtist.length > 0">
      <ion-row>
        <ion-col size="12" size-sm="8" offset-sm="2">
          <ion-card
            fill="clear"
            [routerLink]="['/','tabs','tab1','discover',relevantArtist[0].id]"
          >
            <ion-card-header>
              <ion-row>
                <ion-col class="ion-text-right">
                  <ion-button fill="clear" (click)="addToWatch()"></ion-button>
                  <ion-icon name="star-outline"></ion-icon>
                </ion-col>
              </ion-row>
              <ion-card-title>{{ relevantArtist[0].name }}</ion-card-title>
              <ion-card-subtitle
                >{{ relevantArtist[0].cost | currency: "€" }} /
                Night</ion-card-subtitle
              >
            </ion-card-header>
            <ion-img [src]="relevantArtist[0].imageUrl"></ion-img>
            <ion-card-content>
              <!-- <p>Rating: {{ relevantArtist[0].rating | percent}}</p> -->
              <p>Genre: {{ relevantArtist[0].genre }}</p>
              <p>Equipment: {{ relevantArtist[0].equipment }}</p>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="12" size-sm="8" offset-sm="2">
          <ion-card
            *ngFor="let artist of relevantArtist.slice(1)"
            fill="clear"
            [routerLink]="['/','tabs','tab1','discover',artist.id]"
          >
            <ion-card-header>
              <ion-row>
                <ion-col class="ion-text-right">
                  <ion-button fill="clear" (click)="addToWatch()"></ion-button>
                  <ion-icon name="star-outline"></ion-icon>
                </ion-col>
              </ion-row>
              <ion-card-title>{{ artist.name }}</ion-card-title>
              <ion-card-subtitle
                >{{ artist.cost | currency: "€" }} / Night</ion-card-subtitle
              >
            </ion-card-header>
            <ion-img [src]="artist.imageUrl"></ion-img>
            <ion-card-content>
              <!-- <p>Rating: {{ artist.rating | percent}}</p> -->
              <p>Genre: {{ artist.genre }}</p>
              <p>Equipment: {{ artist.equipment }}</p>
              <!-- <ion-buttons slot="end">
              <ion-button (click)="toggleFavorite()">
                <ion-icon *ngIf="!isFavorite" slot="icon-only" name="star-outline"></ion-icon>
                <ion-icon *ngIf="isFavorite" slot="icon-only" name="star"></ion-icon>
              </ion-button>
            </ion-buttons> -->
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</div>

<div [ngSwitch]="switchSegment">
  <div *ngSwitchCase="'viewVenue'">
    <ion-grid *ngIf="relevantVenue.length > 0">
      <ion-row>
        <ion-col size="12" size-sm="8" offset-sm="2">
          <ion-card
            fill="clear"
            [routerLink]="['/','tabs','tab1','discover',relevantVenue[0].id]"
          >
            <ion-card-header>
              <ion-row>
                <ion-col class="ion-text-right">
                  <ion-button fill="clear" (click)="addToWatch()"></ion-button>
                  <ion-icon name="star-outline"></ion-icon>
                </ion-col>
              </ion-row>
              <ion-card-title>{{ relevantVenue[0].name }}</ion-card-title>
              <ion-card-subtitle
                >{{ relevantVenue[0].cost | currency: "€" }} /
                Night</ion-card-subtitle
              >
            </ion-card-header>
            <ion-img [src]="relevantVenue[0].imageUrl"></ion-img>
            <ion-card-content>
              <!-- <p>Rating: {{ relevantVenue[0].rating | percent}}</p> -->
              <p>Genre: {{ relevantVenue[0].genre }}</p>
              <p>Equipment: {{ relevantVenue[0].equipment }}</p>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="12" size-sm="8" offset-sm="2">
          <ion-card
            *ngFor="let venue of relevantVenue.slice(1)"
            fill="clear"
            [routerLink]="['/','tabs','tab1','discover',venue.id]"
          >

Discover.page.ts:

export class DiscoverPage implements OnInit, OnDestroy {
  loadedArtist: Artist[];
  loadedVenue: Venue[];
  relevantArtist: Artist[];
  relevantVenue: Venue[];
  switchSegment: string;

  private artistSub: Subscription;
  private venueSub: Subscription;

  constructor(
    private artistService: ArtistService,
    private venueService: VenueService,
    private authService: AuthService
  ) { }

  ngOnInit() {
    this.artistSub = this.artistService.artist.subscribe(artist => {
      this.loadedArtist = artist;
      this.relevantArtist = this.loadedArtist;
      this.loadedArtist = this.relevantArtist.slice(1);
    });
    this.venueSub = this.venueService.venue.subscribe(venue => {
      this.loadedVenue = venue;
      this.relevantVenue = this.loadedVenue;
      this.loadedVenue = this.relevantVenue.slice(1);
    });
  }

  ionViewWillEnter() {
    this.artistService.fetchArtist().subscribe();
    this.venueService.fetchVenue().subscribe();
    this.switchSegment = 'viewArtist';
  }

  addToWatch() {
    console.log('favourite clicked..');
  }

  ngOnDestroy() {
    if (this.artistSub) {
      this.artistSub.unsubscribe();
    }
    if (this.venueSub) {
      this.venueSub.unsubscribe();
    }
  }

  onFilterUpdate(event: CustomEvent<SegmentChangeEventDetail>) {
    if (event.detail.value === 'viewArtist') {
      this.relevantArtist = this.loadedArtist;
      this.loadedArtist = this.relevantArtist.slice(1);
    } else {
      this.relevantArtist = this.loadedArtist.filter(
        artist => artist.userId !== this.authService.userId);
    }
    if(event.detail.value === 'viewVenue') {
    this.relevantVenue = this.loadedVenue.slice(1);
  } else {
    this.relevantVenue = this.loadedVenue.filter(
      venue => venue.userId !== this.authService.userId);
  }
  }

}

When the screen is first loaded it shows the relativeArtist. It's only when I change the segment value that the relevantVenue isn't being shown and the error appears.