Using a data source

Defining the model and the loader

```typescript linenums="1" 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 = () => { return inject(HttpClient).get(alertRulesUrl); };

```

Registering the data source

```typescript hl_lines="20" linenums="1" 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

```html hl_lines="5 9" linenums="1" Alert rules

```

```typescript hl_lines="20-23" linenums="1" 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(alertRulesKey, { type: 'value', defaultValue: [] });

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

```