I need to connect my [ngValue] property to a string with the last 4 characters removed. What is the most efficient way to do this using ngFor beforehand? Here is the code snippet:
<select
id="symbolInLineSelector"
(change)="insertSymbol($event.target.value)"
class="ql-size"
title="symbolSelect">
<option
*ngFor="let symbol of keys(symbols)"
[ngValue]="symbol"
[innerHtml]="symbols[symbol]">
</option>
</select>Below is the model I am using and how it is implemented in my typescript file:
model
export enum Symbols {
'equivales' = '\u2261     ;eq',
...
}typescript
import {Symbols} from '../../model/symbols';
keys = Object.keys;
symbols = Symbols;
insertSymbol(selectedVal) {
this.editorInstance.insertText(this.previousEditorSelection, selectedVal.splice(0,-4));
this.editorInstance.setSelection(this.previousEditorSelection.index + selectedVal.length + 1);
this.previousEditorSelection = this.editorInstance.getSelection();
}Currently, the dropdown on my webpage looks like this:
https://i.sstatic.net/8XCLH.png
However, when one of these options is clicked, it inserts shortcut keycodes along with the character into the editor. My objective is to only insert the unicode character without the shortcut codes. Is there a way to achieve this by splicing the string in [ngValue], so that the dropdown shows all information but inserting removes the last 4 characters? I have attempted splicing directly in [ngValue] and in my function call as shown above, but neither method has been successful.