nxt-components logo nxt-components
Github

Extras

The extras module provides multiple utilities to load and display contents of source files and gists.

The extras relie on HttpClient to fetch contents, ensure that it is included with the providers.

import { provideHttpClient } from '@angular/common/http'
import { ApplicationConfig } from '@angular/core'

export const appConfig: ApplicationConfig = {
    providers: [
        provideHttpClient()
    ]
}

Examples

Display contents of a source file

View on GitHub
<pre><code [nxtHighlight]="filePath | codeFromUrl | async"
    language="ts"></code></pre>
import { AsyncPipe } from '@angular/common'
import { Component, ViewEncapsulation } from '@angular/core'
import { HighlightDirective } from 'nxt-highlightjs'
import { CodeFromUrlPipe, GistOptions, NXT_GIST_OPTIONS } from 'nxt-highlightjs/extras'
import filePath from './file.txt'
 
@Component({
    selector: 'app-file',
    imports: [
        CodeFromUrlPipe,
        HighlightDirective,
        AsyncPipe
    ],
    providers: [{
        provide: NXT_GIST_OPTIONS,
        useValue: {
 
        } as GistOptions
    }],
    templateUrl: './file.component.html',
    styleUrl: './file.component.css',
    encapsulation: ViewEncapsulation.Emulated
})
export class FileComponent {
 
    filePath = filePath
 
}

Display a file form a gist

View on GitHub
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-sample',
    imports: [],
    templateUrl: './sample.component.html',
    styleUrl: './sample.component.scss',
    encapsulation: ViewEncapsulation.Emulated
})
export class SampleComponent {

}

@if (loading) {
<div class="d-flex justify-content-center">
    <div class="spinner-border"
        role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
} @else if (error) {
<div class="alert alert-danger"
    role="alert">
    <span class="gist-loading-error">{{ error.message }}</span>
</div>
}
 
<pre [ngClass]="{ 'empty': !gist }"><code [nxtGist]="gistId"
    (gistLoad)="gist = $event; loading = false"
    (gistError)="error = $event; loading = false"
    [nxtHighlight]="(gist | gistFile: 'sample.component.ts')?.content"
    language="ts"></code></pre>
import { NgClass } from '@angular/common'
import { Component, ViewEncapsulation } from '@angular/core'
import { HighlightDirective } from 'nxt-highlightjs'
import { Gist, GistDirective, GistFilePipe } from 'nxt-highlightjs/extras'
 
@Component({
    selector: 'app-gist-file',
    imports: [
        GistDirective,
        GistFilePipe,
        HighlightDirective,
        NgClass
    ],
    templateUrl: './gist-file.component.html',
    styleUrl: './gist-file.component.css',
    encapsulation: ViewEncapsulation.Emulated
})
export class GistFileComponent {
 
    gistId = '745149f6fc352f9036908ffe99054578'
    gist?: Gist
    error?: Error
    loading = true
 
}

Display contents of a gist

View on GitHub

<p>sample works!</p>

@if (loading) {
<div class="d-flex justify-content-center">
    <div class="spinner-border"
        role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
} @else if (error) {
<div class="alert alert-danger"
    role="alert">
    <span class="gist-loading-error">{{ error.message }}</span>
</div>
} @else {
<label for="gist"
    class="form-label">File</label>
<select [(ngModel)]="selectedFile"
    class="form-select"
    name="gist">
    @for (file of gist?.files | keyvalue; track file.key) {
    <option [value]="file.key">{{ file.value.filename }}</option>
    }
</select>
 
<br>
}
 
<pre [ngClass]="{ 'empty': !gist }"><code [nxtGist]="gistId"
    (gistLoad)="setGist($event)"
    (gistError)="error = $event; loading = false"
    [nxtHighlight]="(gist | gistFile: selectedFile)?.content"
    [language]="extName(selectedFile) ?? ''"></code></pre>
import { KeyValuePipe, NgClass } from '@angular/common'
import { Component, ViewEncapsulation } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { HighlightDirective } from 'nxt-highlightjs'
import { Gist, GistDirective, GistFilePipe } from 'nxt-highlightjs/extras'
 
@Component({
    selector: 'app-gist',
    imports: [
        GistDirective,
        GistFilePipe,
        HighlightDirective,
        KeyValuePipe,
        FormsModule,
        NgClass
    ],
    templateUrl: './gist.component.html',
    styleUrl: './gist.component.css',
    encapsulation: ViewEncapsulation.Emulated
})
export class GistComponent {
 
    gistId = '745149f6fc352f9036908ffe99054578'
    gist?: Gist
    error?: Error
    loading = true
 
    selectedFile?: string
 
    setGist(gist: Gist) {
        this.gist = gist
        if (this.selectedFile && this.selectedFile in gist.files)
            return
 
        this.selectedFile = Object.keys(gist.files)[0]
        this.loading = false
    }
 
    extName(file?: string) {
        return file?.split('.').reverse()[0]
    }
 
}