Angular Highlight.js directives

<div class="row">
    <div class="col">
 
        <label class="form-label"
            for="language">Language</label>
        <select [(ngModel)]="language"
            class="form-select"
            name="language">
            <option *ngFor="let i of languages"
                [value]="i[1]">{{ i[0] }}</option>
        </select>
 
        <br>
 
        <label class="form-label"
            for="theme">Theme</label>
        <select [(ngModel)]="theme"
            class="form-select"
            name="theme">
            <option *ngFor="let i of themes"
                [value]="i">{{ i }}</option>
        </select>
 
        <br>
 
        <div class="form-check form-switch">
            <input class="form-check-input"
                type="checkbox"
                role="switch"
                id="is-directive"
                name="is-directive"
                [(ngModel)]="lineNumbers">
            <label class="form-check-label"
                for="is-directive">Show line numbers</label>
        </div>
 
        <br>
 
        <textarea class="form-control"
            rows="15"
            placeholder="Paste code here"
            [(ngModel)]="code"></textarea>
 
    </div>
    <div class="col highlighted-result $-{{ theme }}">
 
        @if(lineNumbers){
        <pre><code [nxtHighlightAuto]="code"
            [languages]="[language]"
            lineNumbers></code></pre>
        } @else {
        <pre><code [nxtHighlightAuto]="code"
            [languages]="[language]"></code></pre>
        }
 
    </div>
</div>