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>

import { CommonModule } from '@angular/common'
import { Component, ViewEncapsulation } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { HighlightAutoDirective, HighlightJS, HighlightJSOptions, HighlightLoader, NXT_HIGHLIGHT_OPTIONS } from 'nxt-highlightjs'
import { HighlightLineNumbersDirective } from 'nxt-highlightjs/line-numbers'
import { languages, themes } from './helpers'
 
@Component({
    selector: 'app-basic-example',
    templateUrl: './basic-example.component.html',
    styleUrls: ['./basic-example.component.css'],
    encapsulation: ViewEncapsulation.None,
    imports: [
        CommonModule,
        FormsModule,
        HighlightAutoDirective,
        HighlightLineNumbersDirective
    ],
    providers: [
        {
            provide: NXT_HIGHLIGHT_OPTIONS,
            useValue: {
                fullLibraryLoader: () => import('highlight.js').then(r => r.default),
                lineNumbersLoader: () => import('nxt-highlightjs/line-numbers')
            } as HighlightJSOptions
        },
        {
            provide: HighlightLoader,
            useClass: HighlightLoader
        },
        {
            provide: HighlightJS,
            useClass: HighlightJS
        }
    ]
})
export class BasicExampleComponent {
 
    readonly themes = themes
    readonly languages = languages
 
    theme = 'androidstudio'
    language = 'typescript'
    lineNumbers = false
 
    code = ''
 
}