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>

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>

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>