Using a data source

Defining the model and the loader

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { NgssmDataLoading } from 'ngssm-data';

export const alertRulesKey = '@ngssm-data-demo:alert-rules';
export const alertRulesUrl = '/data/alert-rules.json';

export type AlertLevel = 'Info' | 'Warning' | 'Error';

export interface AlertRule {
  id: number;
  title: string;
  level: AlertLevel;
}

export const alertRulesLoader: NgssmDataLoading<AlertRule[]> = () => {
  return inject(HttpClient).get<AlertRule[]>(alertRulesUrl);
};

Registering the data source

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding, withHashLocation } from '@angular/router';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

import { provideConsoleAppender } from 'ngssm-store';
import { provideNgssmAgGrid } from 'ngssm-ag-grid';
import { provideNgssmData, provideNgssmDataSource } from 'ngssm-data';

import { routes } from './app.routes';
import { alertRulesKey, alertRulesLoader } from './model/alert-rule';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes, withHashLocation(), withComponentInputBinding()),
    provideHttpClient(withInterceptorsFromDi()),
    provideConsoleAppender('ngssm-data-demo'),
    provideNgssmAgGrid(),
    provideNgssmData(),
    provideNgssmDataSource(alertRulesKey, alertRulesLoader)
  ]
};

Displaying the data

htmlts

<mat-card class="fxFlex flex-column-stretch">
  <mat-card-header>
    <mat-card-title class="flex-row-center">
      Alert rules
      <ngssm-data-reload-button [dataSourceKeys]="[alertRulesSource.key]"></ngssm-data-reload-button>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="fxFlex flex-column-stretch">
    <ag-grid-angular [gridOptions]="gridOptions" [rowData]="alertRulesSource.value()" ngssmAgGridTheme class="fxFlex"> </ag-grid-angular>
  </mat-card-content>
</mat-card>

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';

import { AgGridAngular } from 'ag-grid-angular';
import { GridOptions, ValueGetterParams } from 'ag-grid-community';

import { NgssmAgGridThemeDirective } from 'ngssm-ag-grid';
import { dataSourceToSignal, NgssmDataReloadButtonComponent } from 'ngssm-data';

import { AlertRule, alertRulesKey } from '../../model';

@Component({
  selector: 'app-alert-rules',
  imports: [MatCard, MatCardHeader, MatCardTitle, MatCardContent, AgGridAngular, NgssmDataReloadButtonComponent, NgssmAgGridThemeDirective],
  templateUrl: './alert-rules.component.html',
  styleUrl: './alert-rules.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AlertRulesComponent {
  public readonly alertRulesSource = dataSourceToSignal<AlertRule[]>(alertRulesKey, {
    type: 'value',
    defaultValue: []
  });

  public readonly gridOptions: GridOptions = {
    columnDefs: [
      {
        headerName: 'Id',
        valueGetter: (params: ValueGetterParams<AlertRule>) => params.data?.id
      },
      {
        headerName: 'Level',
        valueGetter: (params: ValueGetterParams<AlertRule>) => params.data?.level
      },
      {
        headerName: 'Title',
        valueGetter: (params: ValueGetterParams<AlertRule>) => params.data?.title,
        width: 400
      }
    ]
  };
}