Set HTML space code in Typescript angular 2

Question

I just a problem about how to set space to my value in html. I have code :

    setValuetoComboBox(test:string, lvl:number){
    let lastTest:string;
    let spaceString:string;
    //&#160;
    spaceString='&#160';
    for(var i = 1; i <= lvl; i++){
        spaceString=spaceString + '&#160';
    }
    lastTest = spaceString + test;
    return lastTest;
}

In this code, i have &#160 which to make space in html. and i have code in html:

                                    <select [formControl]="parent" class="form-control">
                                    <option value="-1">Root</option>
                                    <option value="{{test.id}}" *ngFor="let test of parentValue">
                                        {{setValuetoComboBox(test.name, test.lvl)}}
                                    </option>
                                </select>

and the result is :

The Result

this the wrong result, i want space not code &#160. Can anyone find the answer about my problem ?

score 2 · Accepted Answer · edited May 23 '17 at 11:54

I guess what you actually want is

<option value="{{test.id}}" *ngFor="let test of parentValue"
    [innerHTML]="setValuetoComboBox(test.name, test.lvl)">
</option>

With {{ }} the literal string will be inserted.

You might need to mark it as secure using the sanitizer for example like shown in How to bind raw html in Angular2

You should be aware that setValuetoComboBox(...) might be called very often (every time Angular runs change detection). It's usually a good idea to assign the results of the call in a property and bind to this property instead of binding to a function.

Binding to functions in the view is generally discouraged because of this. It can cause serious performance issues.

Set HTML space code in Typescript angular 2

1 Answers1