user preferences - chord type

src/app/modules/shows/show/show.component.html

@@ -2,12 +2,15 @@
   <app-card
     heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}}">
 
+    <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
+
     <div *ngIf="showSongs && songs" class="song-list">
       <app-song *ngFor="let song of showSongs"
                 [showId]="showId"
                 [showSong]="song"
                 [showSongs]="showSongs"
                 [song]="getSong(song.songId)"
+                [showText]="showText"
       ></app-song>
     </div>
 

src/app/modules/shows/show/show.component.ts

@@ -20,6 +20,7 @@ export class ShowComponent implements OnInit {
   public songs: Song[];
   public showSongs: ShowSong[];
   public showId: string;
+  public showText: boolean;
 
   constructor(
     private activatedRoute: ActivatedRoute,

src/app/modules/shows/show/song/song.component.html

@@ -1,8 +1,9 @@
-<div *ngIf="_song" class="song">
-  <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
-  <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
-  <span class="title">{{_song.title}}</span>
-  <span class="keys">
+<div *ngIf="_song" class="row">
+  <div class="song">
+    <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
+    <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
+    <span class="title">{{_song.title}}</span>
+    <span class="keys">
     <span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}}&nbsp;→&nbsp;</span>
     <mat-form-field *ngIf="keys" appearance="standard">
         <mat-select [formControl]="keyFormControl">
@@ -10,5 +11,7 @@
         </mat-select>
       </mat-form-field>
   </span>
-  <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
+    <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
+  </div>
+  <app-song-text *ngIf="showText" [text]="_song.text"></app-song-text>
 </div>

src/app/modules/shows/show/song/song.component.less

@@ -1,5 +1,9 @@
-.song {
+.row {
   border-bottom: 1px solid #ccc;
+}
+
+
+.song {
   display: grid;
   grid-template-columns: 20px 20px auto 70px 25px;
   @media screen and (max-width: 860px) {

src/app/modules/shows/show/song/song.component.ts

@@ -15,10 +15,12 @@ import {FormControl} from '@angular/forms';
 })
 export class SongComponent implements OnInit {
   @Input() public showSong: ShowSong;
-
-  @Input() public showId: string;
-  public keys: string[];
   @Input() public showSongs: ShowSong[];
+  @Input() public showId: string;
+  @Input() public showText: boolean;
+
+
+  public keys: string[];
   public faDelete = faTrash;
   public faUp = faCaretUp;
   public faDown = faCaretDown;