Skip to content

Commit a214cf5

Browse files
salmacodecomputerlovesalmacodecomputerlove
committed
ngTemplateOutlet BE GONE
1 parent 8fa27b2 commit a214cf5

File tree

2 files changed

+48
-59
lines changed

2 files changed

+48
-59
lines changed

‎apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html

Lines changed: 27 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,3 @@
1-
<ng-template #string let-stringName="stringName" let-stringNote="stringNote">
2-
<ng-container *ngFor="let fret of frets">
3-
<div
4-
class="fretboard__cell"
5-
[class.learn__theme]="configuration === 'learn'"
6-
[class.fretboard__cell--string]="fret === 0"
7-
[class.fretboard__cell--selected]="fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive"
8-
[attr.data-string-name]="fret === 0 ? stringName : null"
9-
[attr.data-string]="stringNote"
10-
[attr.data-fret]="fret"
11-
[attr.data-degree]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree"
12-
[attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degreeNumber)"
13-
[attr.data-mode]="mode"
14-
[attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree)"
15-
(click)="playbackService.playNote(stringName, fret)"
16-
></div>
17-
</ng-container>
18-
</ng-template>
19-
20-
<ng-template #fretboardHelp>
21-
<ng-container *ngFor="let fret of frets">
22-
<span class="fretboard__help" [attr.data-fret]="fret"></span>
23-
</ng-container>
24-
</ng-template>
25-
261
<div class="arrowHint">
272
<span class="arrowHint__arrow"
283
[class.fretboard__flip]="orientation === Orientations.left"></span>
@@ -36,20 +11,33 @@
3611
[class.fretboard__leftHanded]="orientation === Orientations.left"
3712
[class.fretboard__24]="fretMode === FretModes.twentyFour">
3813

39-
<ng-container *ngFor="let item of reverseStrings$ | async">
40-
<ng-container
41-
[ngTemplateOutlet]="string"
42-
[ngTemplateOutletContext]="item"
43-
></ng-container>
14+
<ng-container *ngFor="let string of strings, let stringIndex = index">
15+
<ng-container *ngFor="let fret of frets">
16+
<div
17+
class="fretboard__cell"
18+
[class.learn__theme]="configuration === 'learn'"
19+
[class.fretboard__cell--string]="fret === 0"
20+
[class.fretboard__cell--selected]="fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive"
21+
[attr.data-string-name]="fret === 0 ? string.name : null"
22+
[attr.data-string]="string.note"
23+
[attr.data-fret]="fret"
24+
[attr.data-string-number]="stringIndex + 1"
25+
[attr.data-degree]="(fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degree"
26+
[attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degreeNumber)"
27+
[attr.data-mode]="mode"
28+
[attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive)?.degree)"
29+
(click)="playbackService.playNote(string.name, fret)"
30+
></div>
31+
</ng-container>
4432
</ng-container>
4533
</div>
4634

4735
<div class="fretboard"
4836
[class.fretboard__leftHanded]="orientation === Orientations.left"
4937
[class.fretboard__24]="fretMode === FretModes.twentyFour">
50-
<ng-container
51-
[ngTemplateOutlet]="fretboardHelp"
52-
></ng-container>
38+
<ng-container *ngFor="let fret of frets">
39+
<span class="fretboard__help" [attr.data-fret]="fret"></span>
40+
</ng-container>
5341
</div>
5442
</div>
5543

@@ -95,11 +83,14 @@
9583
<div class="fretboard__tuningGroup">
9684
<button class="fretboard__changeTuning"
9785
[class.tuning--active]="tuning === Tunings.standard"
98-
(click)="setTuning(Tunings.standard)">Standard</button>
86+
(click)="setTuning(Tunings.standard)">Standard
87+
</button>
9988
<button class="fretboard__changeTuning"
10089
[class.tuning--active]="tuning === Tunings.dropd"
101-
(click)="setTuning(Tunings.dropd)">Drop D</button>
90+
(click)="setTuning(Tunings.dropd)">Drop D
91+
</button>
10292
<button class="fretboard__changeTuning"
10393
[class.tuning--active]="tuning === Tunings.dadgad"
104-
(click)="setTuning(Tunings.dadgad)">DADGAD</button>
94+
(click)="setTuning(Tunings.dadgad)">DADGAD
95+
</button>
10596
</div>

‎apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -37,30 +37,31 @@ enum Tunings {
3737
dadgad = 'dadgad'
3838
}
3939

40+
//string are in reverse order
4041
const TuningReturner = {
4142
'standard': [
42-
{ stringName: 'E', stringNote: 'E' },
43-
{ stringName: 'A', stringNote: 'A' },
44-
{ stringName: 'D', stringNote: 'D' },
45-
{ stringName: 'G', stringNote: 'G' },
46-
{ stringName: 'B', stringNote: 'B' },
47-
{ stringName: 'e', stringNote: 'E' }
43+
{ name: 'e', note: 'E' },
44+
{ name: 'B', note: 'B' },
45+
{ name: 'G', note: 'G' },
46+
{ name: 'D', note: 'D' },
47+
{ name: 'A', note: 'A' },
48+
{ name: 'E', note: 'E' },
4849
],
4950
'dropd': [
50-
{ stringName: 'D', stringNote: 'D' },
51-
{ stringName: 'A', stringNote: 'A' },
52-
{ stringName: 'D', stringNote: 'D' },
53-
{ stringName: 'G', stringNote: 'G' },
54-
{ stringName: 'B', stringNote: 'B' },
55-
{ stringName: 'e', stringNote: 'E' }
51+
{ name: 'e', note: 'E' },
52+
{ name: 'B', note: 'B' },
53+
{ name: 'G', note: 'G' },
54+
{ name: 'D', note: 'D' },
55+
{ name: 'A', note: 'A' },
56+
{ name: 'D', note: 'D' },
5657
],
5758
'dadgad': [
58-
{ stringName: 'D', stringNote: 'D' },
59-
{ stringName: 'A', stringNote: 'A' },
60-
{ stringName: 'D', stringNote: 'D' },
61-
{ stringName: 'G', stringNote: 'G' },
62-
{ stringName: 'A', stringNote: 'A' },
63-
{ stringName: 'd', stringNote: 'D' }
59+
{ name: 'd', note: 'D' },
60+
{ name: 'A', note: 'A' },
61+
{ name: 'G', note: 'G' },
62+
{ name: 'D', note: 'D' },
63+
{ name: 'A', note: 'A' },
64+
{ name: 'D', note: 'D' },
6465
]
6566
};
6667

@@ -95,10 +96,7 @@ export class FretboardComponent implements OnChanges, OnInit {
9596
tuning = Tunings.standard;
9697
highlightedDegrees = new Set<ScaleDegrees>();
9798
noteNameDisplay = NoteDisplays.noteNames;
98-
strings$ = new BehaviorSubject<any[]>(TuningReturner[Tunings.standard]);
99-
reverseStrings$ = this.strings$.pipe(
100-
map(str => str.reverse())
101-
)
99+
strings = TuningReturner[Tunings.standard];
102100

103101
constructor(public playbackService: NotePlaybackService,
104102
private localStorage: AbstractDataService) {
@@ -142,7 +140,7 @@ export class FretboardComponent implements OnChanges, OnInit {
142140
}
143141

144142
configureStrings() {
145-
this.strings$.next(TuningReturner[this.tuning]);
143+
this.strings = TuningReturner[this.tuning];
146144
}
147145

148146
configureFretboard() {

0 commit comments

Comments
 (0)