Update request to reflect suggestions by @ninjakiwi:

Added class for no-select in styles.  Added reference to class in slides.component.html and service.component.html as I believe you would never need to select the text in the remote controller here

src/app/components/service/service.component.html

@@ -1,3 +1,3 @@
-<mat-card *ngFor="let item of items; let counter = index;" (click)="onItemSelected(item)" [tabindex]="item.id" class="service-item">
+<mat-card *ngFor="let item of items; let counter = index;" (click)="onItemSelected(item)" [tabindex]="item.id" class="service-item no-select">
   <mat-icon>{{ getIcon(item) }}</mat-icon> {{ item.title }}
 </mat-card>

src/app/components/slides/slides.component.html

@@ -1,4 +1,4 @@
-<mat-card mat-list-item *ngFor="let slide of slides; let counter = index;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
+<mat-card class="no-select" mat-list-item *ngFor="let slide of slides; let counter = index;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
   <div class="verse-tag">{{ slide.tag }}</div>
   <div class="verse-text">{{ slide.text }}</div>
 </mat-card>

src/styles.scss

@@ -99,3 +99,7 @@ footer {
   align-items: center;
   justify-content: center;
 }
+
+.no-select {
+  user-select: none;
+}