@one-paragon/angular-utilities 2.8.3 → 2.8.4

package/src/table-builder/ngrx/tableBuilderStateStore.ts

@@ -0,0 +1,203 @@
+import { ComponentStore } from "@ngrx/component-store";
+import { Injectable, Signal } from "@angular/core";
+import { Dictionary } from "../interfaces/dictionary";
+import { PersistedTableState } from "../classes/TableState";
+import { isCustomFilter } from "../classes/filter-info";
+
+@Injectable({ providedIn: 'root' })
+export class TableBuilderStateStore extends ComponentStore<GlobalStorageState> {
+  constructor(){
+    super(loadGlobalStorageState() || defaultStorageState)
+  }
+
+  //selectors
+  $selectLocalTableProfile = (profileKey:string): Signal<Profile | undefined> => this.selectSignal(state =>
+    state.localProfiles[profileKey]);
+
+  $selectLocalTableStateForView = (tableId: string) => this.selectSignal(
+    this.$selectLocalTableProfile(tableId),
+    (profile) => {
+      if(profile?.current) {
+        return profile.states[profile.current];
+      }
+      if(profile?.localSavedState) return profile.localSavedState;
+      return null;
+    }
+  )
+
+  $selectLocalProfileCurrentKey = (key:string) => this.selectSignal(
+    this.$selectLocalTableProfile(key),
+    (profile) => profile?.current);
+
+  $selectLocalProfileDefaultKey = (key:string) => this.selectSignal(
+    this.$selectLocalTableProfile(key),
+    (profile) => profile?.default);
+
+  $selectLocalProfileKeys = (tableId:string) => this.selectSignal(
+    this.$selectLocalTableProfile(tableId),
+    (profile) => Object.keys(profile?.states || {})
+  );
+
+
+  // reducers
+
+
+  saveTableSettingsToLocalAndStorage = (tableId: string, stateName: string, tableState: PersistedTableState, asDefault?: boolean) => {
+    this.saveTableStateToStorage(tableId, stateName, tableState, asDefault);
+    this.saveTableStateToLocal({ tableId, tableState, stateName, asDefault });
+  }
+
+  saveTableStateToLocal = this.updater((state, props: { tableId: string, tableState: PersistedTableState, stateName?: string, asDefault?: boolean }) => {
+    let profile = state.localProfiles[props.tableId];
+    if(!profile?.states) {
+      profile = { states: {} };
+    }
+    if(!props.stateName){
+      profile = { ...profile, localSavedState: props.tableState };
+    } else {
+      profile = { ...profile, states: { ...profile.states, [props.stateName]: props.tableState } };
+    }
+    if(props.asDefault){
+      profile.default = props.stateName;
+    }
+    return { ...state, localProfiles: { ...state.localProfiles, [props.tableId]: profile } }
+  });
+
+  saveTableStateToStorage = (tableId: string, stateName: string, tableState: PersistedTableState, asDefault = false) => {
+    const globalSavedState: PersistedGlobalStorageSate = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    globalSavedState.localProfiles[tableId] ??= { states: {} };
+    const savableState = { ...tableState };
+    savableState.filters = Object.values(savableState.filters || {}).filter(f => !isCustomFilter(f) || !f.notSavable).reduce((obj: any, filter) => {
+      obj[filter.filterId!] = savableState.filters![filter.filterId!];
+      return obj;
+    }, {});
+    globalSavedState.localProfiles[tableId].states[stateName] = savableState;
+    if(asDefault){
+      globalSavedState.localProfiles[tableId].default = stateName;
+    }
+    localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+  }
+
+  addNewStateToLocalAndStorage = (tableId: string, newStateName: string, tableState: PersistedTableState, asDefault?: boolean) => {
+    this.saveTableSettingsToLocalAndStorage(tableId, newStateName, tableState, asDefault);
+    this.setLocalCurrentState({ tableId: tableId, currentStateKey: newStateName });
+  }
+
+  setLocalCurrentState = this.updater((state, props: { tableId: string, currentStateKey: string }) => {
+    const profile = state.localProfiles[props.tableId] || { states: {} };
+    profile.current = props.currentStateKey;
+    return { ...state, localProfiles: { ...state.localProfiles, [props.tableId]: { ...profile } } };
+  });
+
+  setDefaultInLocalAndStorage = (tableId: string, newDefault: string) => {
+    this.setDefaultInLocal({ default: newDefault, key: tableId });
+    this.setDefaultInStorage(tableId, newDefault);
+  }
+
+  setDefaultInLocal = this.updater((state, props: { key: string, default: string }) => {
+    if(state.localProfiles[props.key]?.states[props.default]) {
+      return ({ ...state, localProfiles: { ...state.localProfiles, [props.key]: { ...state.localProfiles[props.key], default: props.default } } });
+    }
+    return state;
+  });
+
+  unsetDefaultFromLocalAndStorage = (tableId: string) => {
+    this.unsetDefaultFromLocal(tableId);
+    this.unsetDefaultFromStorage(tableId);
+  }
+
+  unsetDefaultFromLocal = (tableId: string) => {
+    this.patchState(tables => {
+      const profile = { ...tables.localProfiles[tableId] };
+      if(profile) {
+        delete profile.default;
+      }
+      return { ...tables, localProfiles: { ...tables.localProfiles, [tableId]: profile } };
+    });
+  }
+
+  unsetDefaultFromStorage = (tableId: string) => {
+    const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    if(globalSavedState.localProfiles[tableId]) {
+      delete globalSavedState.localProfiles[tableId].default;
+      localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+    }
+  }
+
+  setDefaultInStorage = (tableId: string, stateName: string) => {
+    const tableProfile = this.$selectLocalTableProfile(tableId)();
+    const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    let savedProfile = globalSavedState.localProfiles[stateName];
+    if(!savedProfile?.states) {
+      savedProfile = { default: stateName, states: tableProfile!.states };
+    } else {
+      savedProfile.default = stateName;
+    }
+    globalSavedState.localProfiles[tableId] = savedProfile;
+    localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+  }
+
+  deleteLocalProfilesState = this.updater((state, props: { key: string, stateKey: string }) => {
+    let profile = state.localProfiles[props.key];
+    if(profile) {
+      const current = profile.current === props.stateKey ? profile.default : profile.current;
+      profile = { ...profile, current, states: { ...profile.states } };
+      delete profile.states[props.stateKey];
+      if(current === props.stateKey) {
+        profile.current = undefined;
+      }
+      return { ...state, localProfiles: { ...state.localProfiles, [props.key]: profile } };
+    } else {
+      return state;
+    }
+  });
+
+  deleteProfileFromLocalAndStorage = (key: string, stateKey: string) => {
+    const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    if(!globalSavedState.localProfiles[key]) {
+      return;
+    } else {
+      delete (globalSavedState.localProfiles[key].states ?? {})[stateKey];
+    }
+    if(globalSavedState.localProfiles[key].default === stateKey) {
+      globalSavedState.localProfiles[key].default = undefined;
+    }
+    localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+    this.deleteLocalProfilesState({ key, stateKey })
+  }
+}
+
+function loadGlobalStorageState() : GlobalStorageState | void {
+  const storage = localStorage.getItem('global-state-storage');
+
+  if(storage) {
+    const s: GlobalStorageState = (JSON.parse(storage) as PersistedGlobalStorageSate);
+    s.localProfiles ??= {};
+    for(const key in s.localProfiles){
+      const profile = s.localProfiles[key];
+      s.localProfiles[key] = { ...profile, current: profile.default } as Profile
+    }
+    return { ...defaultStorageState, ...s };
+  }
+}
+
+interface PersistedProfile {
+  states: Dictionary<PersistedTableState>;
+  default?: string;
+}
+export interface Profile extends PersistedProfile {
+  current?: string;
+  localSavedState?: PersistedTableState;
+}
+
+export interface GlobalStorageState {
+  localProfiles: Dictionary<Profile>;
+}
+
+interface PersistedGlobalStorageSate {
+  localProfiles: Dictionary<PersistedProfile>;
+}
+
+export const defaultStorageState: GlobalStorageState = {
+  localProfiles: {}
+}

package/src/table-builder/pipes/column-total.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { MetaData } from '../interfaces/meta-data';
+import { sumBy } from 'lodash';
+
+@Pipe({
+  name: 'columnTotal',
+})
+export class ColumnTotalPipe implements PipeTransform {
+  transform(data: any[], metaData: MetaData) {
+    const dataToCalculate = data.filter(d => !d.isGroupHeader)
+    switch (metaData.additional!.footer!.type) {
+      case 'sum':
+        return sumBy(dataToCalculate, metaData.key);
+    }
+  }
+}

package/src/table-builder/pipes/format-filter-type.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FilterType } from '../enums/filterTypes';
+
+@Pipe({ name: 'formatFilterType' })
+export class FormatFilterTypePipe implements PipeTransform {
+  transform(filterType: FilterType, value: any){
+    if(filterType === FilterType.IsNull){
+      return value ? filterType : 'Is Not Blank'
+    }
+    return filterType;
+  }
+}

package/src/table-builder/pipes/format-filter-value.pipe.ts

@@ -0,0 +1,71 @@
+import { Pipe, PipeTransform, computed, inject } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { FieldType, MetaData } from '../interfaces/meta-data';
+import { FilterType } from '../enums/filterTypes';
+import { spaceCase } from '../../utilities/pipes/space-case.pipes';
+import { DateTimeFilterFuncs } from '../functions/date-filter-function';
+import { currencyFormatter, dateFormatter } from '../services/transform-creator';
+import { isBlankValueFilter } from '../services/all-values-filter-creator.service';
+
+
+@Pipe({ name: 'formatFilterValue' })
+export class FormatFilterValuePipe implements PipeTransform {
+  tableState = inject(TableStore);
+
+  transform(value: any, key: string, filterType: FilterType) {
+    return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
+  }
+}
+
+const transform = (value: any, meta: MetaData, filterType: FilterType): string => {
+  if(filterType === FilterType.IsNull) {
+    return '';
+  }
+  if(value && (filterType === FilterType.In )){
+    if(meta.fieldType === FieldType.Enum) {
+      return value.map((v: any) => mapSpecial(v) || spaceCase(meta.additional!.enumMap![v])).join(', ') ?? value;
+    }
+    if(meta.fieldType === FieldType.Date || meta.fieldType === FieldType.DateTime) {
+      return value.map( (v: any) => mapSpecial(v) || mapDate(v, meta, filterType)).join(', ') ?? value;
+    }
+    if(meta.fieldType === FieldType.Number || meta.fieldType === FieldType.Currency) {
+      return value.map( (v: any) => mapSpecial(v) || mapNumber(v, meta)).join(', ') ?? value;
+    }
+    return value.map(v => mapSpecial(v) || v).join(', ') ?? value;
+  }
+  if(filterType === FilterType.NumberBetween && (meta.fieldType === FieldType.Number || meta.fieldType === FieldType.Currency)){
+    return mapNumber(value.Start, meta) + ' - ' + mapNumber(value.End, meta);
+  }
+  if(filterType === FilterType.DateBetween){
+    return mapDate(value.Start, meta, filterType) + ' - ' + mapDate(value.End, meta, filterType);
+  }
+  if(meta.fieldType === FieldType.Date || meta.fieldType === FieldType.DateTime){
+    return mapDate(value, meta, filterType);
+  }
+  if(meta.fieldType === FieldType.Currency){
+    return mapNumber(value, meta);
+  }
+  return value
+}
+
+function mapDate(value: any, meta: MetaData, filterType: FilterType){
+  if(meta.fieldType === FieldType.Date){
+    return dateFormatter(value, 'shortDate');
+  }
+  if(meta.fieldType === FieldType.DateTime){
+    return (!!DateTimeFilterFuncs[filterType] ? dateFormatter(value, 'shortDate') : dateFormatter(value, 'short')) || '';
+  }
+  return value
+}
+
+function mapNumber(value: any, meta: MetaData){
+  if(meta.fieldType === FieldType.Currency){
+    return currencyFormatter(value);
+  }
+  return value;
+}
+
+function mapSpecial(value: any){
+  if(isBlankValueFilter(value)) return 'BLANK';
+  return undefined
+}

package/src/table-builder/pipes/key-display.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform, computed, inject } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { spaceCase } from '../../utilities/pipes/space-case.pipes';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Pipe({ name: 'keyDisplay' })
+export class KeyDisplayPipe implements PipeTransform {
+  tableState = inject(TableStore);
+
+  transform = (key: string) =>
+    computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key))
+}

package/src/table-builder/services/all-values-filter-creator.service.ts

@@ -0,0 +1,92 @@
+import { Dictionary } from "@ngrx/entity";
+import { AllValueOptions, FieldType, MetaData } from "../interfaces/meta-data";
+import { TableBuilderConfig } from "../classes/TableBuilderConfig";
+import { createTransformer } from "./transform-creator";
+
+export function buildInAllValuesFilter(
+  config: TableBuilderConfig,
+  previousMeta: MetaData[],
+  currentMeta: MetaData[],
+  data: any[],
+  metaTimestamp: number,
+  dataTimestamp: number,
+  currentAllFilters: Dictionary<any[]>){
+
+  const currentAll = currentMeta.filter(m => {
+    const filterable = m.additional?.filterOptions?.filterableValues;
+    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
+  });
+
+  if(dataTimestamp > metaTimestamp){
+    return currentAll.reduce((dict, md) => {
+      dict[md.key] = buildFilter(data, md, config);
+      return dict;
+    }, {})
+  }
+  const previousAll = previousMeta.filter(m => {
+    const filterable = m.additional?.filterOptions?.filterableValues;
+    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
+  });
+  const newCurrent = currentAll.filter(c => previousAll.every(p => c.key !== p.key));
+  if(newCurrent.length){
+    const c = { ...currentAllFilters }
+    newCurrent.forEach(md => c[md.key] = buildFilter(data, md, config));
+    return c;
+  }
+
+  return currentAllFilters;
+}
+export const blankValueFilter = '__tb_sp_blank';
+export const blankValueAndEmptyStringFilter = '__tb_sp_BLANK';
+function buildFilter(data: any[], metaData: MetaData, config: TableBuilderConfig){
+  const map = metaData.fieldType == FieldType.Currency ? (v => v == null ? v : v[metaData.key])
+    : typeof metaData.filterLogic?.filterBy === 'function' && !(metaData.additional?.filterOptions?.filterableValues as AllValueOptions)?.doNotIncludeBlanks ? metaData.filterLogic?.filterBy
+      : createTransformer(metaData, config, true, false);
+  const mapped: [any, any][] = data.map(v => {
+    const mappedV = map(v);
+    return [mappedV?.toString(), mappedV]
+  });
+
+  const blankAsOption = (metaData?.additional?.filterOptions?.filterableValues as AllValueOptions)?.doNotIncludeBlanks !== true;
+  const stringsAsBlanks = (metaData?.additional?.filterOptions?.filterableValues as AllValueOptions)?.doNotTreatEmptyStringsAsBlanks !== true;
+
+  const blankAsOptionAndHasBlanks = blankAsOption && mapped.some(([, v]) => v == undefined || (stringsAsBlanks && v === ''));
+  if(blankAsOptionAndHasBlanks) {
+    if(stringsAsBlanks) {
+      mapped.push(['BLANK', blankValueAndEmptyStringFilter]);
+    } else {
+      mapped.push(['BLANK', blankValueFilter]);
+    }
+  }
+  return [...new Map(mapped).values()].filter(v => v != undefined && (!blankAsOption || !stringsAsBlanks || v !== '')).sort((a, b) => {
+    const isSymbolA = typeof a === 'symbol';
+    const isSymbolB = typeof b === 'symbol';
+
+    if(isSymbolA || isSymbolB) return 0; // keep symbols in place
+
+    return String(a).localeCompare(String(b)); // normal string sort
+  });
+}
+
+export const splitOutBlankFilter = <T>(arr: T[]) => {
+  const result = Object.groupBy(arr, v => isBlankValueFilter(v) ? 'blank' : 'values');
+  const blank = result.blank?.at(0);
+  const blankFilter = blank === blankValueFilter ?
+    (val) => val == undefined
+    : blank === blankValueAndEmptyStringFilter ? (val) => {
+      return (val === '' || val == null)}
+      : undefined;
+
+  return ({
+    blankFilter,
+    values: result.values || [],
+  })
+}
+
+export function isBlankValueFilter(val: any) {
+  return val === blankValueFilter || val === blankValueAndEmptyStringFilter;
+}
+
+export function isNotBlankValueFilter(val: any) {
+  return !isBlankValueFilter(val);
+}

package/src/table-builder/services/export-to-csv.service.ts

@@ -0,0 +1,117 @@
+import { DatePipe } from '@angular/common';
+import { Injectable, computed, inject } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { TableBuilderConfigToken, TableBuilderExport } from '../classes/TableBuilderConfig';
+import { downloadData } from '../functions/download-data';
+import { ArrayAdditional, ArrayStyle, FieldType, MetaData } from '../interfaces/meta-data';
+import { isPipe } from './transform-creator';
+import { getFactory } from '../functions/sort-data-function';
+import { spaceCase } from '../../utilities';
+import { cloneDeep, merge } from 'lodash';
+
+@Injectable()
+export class ExportToCsvService<T> {
+  private state = inject(TableStore);
+  private config = inject(TableBuilderConfigToken);
+  private datePipe = inject(DatePipe);
+
+  private $exportSettings = computed<TableBuilderExport>(() => {
+    const globalSettings = this.config?.defaultTableSettings?.tableSettings?.exportSettings
+      || {};
+    const tableSettings = (this.state.$notPersistedTableSettings()?.exportSettings || {}) ;
+    return merge({}, globalSettings, tableSettings);
+  });
+
+  exportToCsv = (data: T[]) => {
+    const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
+    const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
+    const extraLinkCols = this.getExtraLinkCols(meta);
+    const csv = this.csvData(data, [...meta, ...extraLinkCols]);
+    downloadData(csv, 'export.csv', 'text/csv') ;
+  }
+
+  private getExtraLinkCols = (meta: MetaData<T>[]) => {
+    return meta.filter(md => {
+      if(!md.additional?.link) return;
+      const exportForCol = merge({}, this.$exportSettings(), md.additional?.export);
+      return exportForCol.mapLink === 'add link' || exportForCol.mapLink === 'add excel';
+    }).map(md => {
+      const exportForCol = merge({}, this.$exportSettings(), md.additional?.export);
+      const newCol = cloneDeep(md);
+      newCol.additional!.export ??= {} as TableBuilderExport;
+      newCol.additional!.export!.mapLink = exportForCol.mapLink === 'add link' ? 'as link' : 'as excel',
+      newCol.displayName = newCol.additional!.export!.linkColumnName || ((newCol.displayName || newCol.key) + ' - (Link)')
+      return newCol;
+    })
+  }
+
+  private csvData = (data:Array<T>, metaData: MetaData<T>[]) => {
+    const res = data.map(row => metaData.map(meta => this.metaToField(meta, row)).join(','));
+    res.unshift(metaData.map(meta => meta.displayName || meta.key).join(','));
+    return res.join('\n');
+  }
+
+  metaToField = (meta: MetaData<T>, row: T) => {
+    const metaExport = meta.additional?.export;
+    if(metaExport?.mapForExport) return metaExport.mapForExport(row);
+
+    const exportForCol = merge({}, this.$exportSettings(), metaExport);
+    let val: any = getFactory(meta.key)(row);
+    if(val == null) return val
+    if(meta.additional?.link && exportForCol.mapLink === 'as link' || exportForCol.mapLink === 'as excel'){
+      let mapper = this.state.$getLinkInfo(meta)()?.link;
+      if(mapper){
+        let mapped = mapper(row);
+        if(exportForCol!.linkDomainPrefix){
+          const bet = mapped.startsWith('/') ? '' : '/';
+          mapped = `${exportForCol!.linkDomainPrefix}${bet}${mapped}`;
+        }
+        if(exportForCol.mapLink === 'as excel'){
+          mapped = this.cleanValForCsv(`=HYPERLINK("${mapped}", "${mapped}")`);
+        }
+        return mapped;
+      }
+    }
+    val = this.cleanValForCsv(this.stringByType(meta, row, val, exportForCol));
+    return val;
+  }
+
+  private stringByType(meta: MetaData<T>, row: T, val: any, exportForCol: TableBuilderExport ){
+    if(meta.map){
+      return meta.map(row);
+    }
+    switch (meta.fieldType) {
+      case FieldType.Date:
+        const dateFormat = meta.additional?.export?.dateFormat || exportForCol?.dateFormat || meta.additional?.dateFormat;
+        return this.transformDate(val, dateFormat);
+      case FieldType.DateTime:
+        const dateTimeFormat = meta.additional?.export?.dateTimeFormat || exportForCol?.dateTimeFormat || meta.additional?.dateTimeOptions?.format;
+        return this.transformDate(val, dateTimeFormat);
+      case FieldType.String:
+        const prepend: string = meta.additional?.export?.prepend || exportForCol?.prepend || '';
+        return prepend + val;
+      case FieldType.Array:
+        const style = meta.additional?.arrayStyle ?? this.config.arrayDefaults?.arrayStyle;
+        const limit = meta.additional?.limit ?? this.config.arrayDefaults?.limit;
+        return (val as Array<string>).slice(0, limit).join(style === ArrayStyle.NewLine ? '\n' : ', ');
+      case FieldType.Enum:
+        return exportForCol?.mapEnumToString ? spaceCase(meta.additional!.enumMap![val]) : val;
+    }
+    return val;
+  }
+
+  cleanValForCsv(val: any) {
+    if(typeof val === 'string' && (val.includes(',') || val.includes('"') || val.includes('\n'))) {
+      val = val.replaceAll('"', '""');
+      val = '"' + val + '"';
+    }
+    return val;
+  }
+
+  private transformDate(val: any, dateFormat: any) {
+    if(this.config.transformers && this.config.transformers[FieldType.Date]) {
+      return this.config.transformers[FieldType.Date]!(val);
+    }
+    return this.datePipe.transform(val, dateFormat);
+  }
+}

package/src/table-builder/services/link-creator.service.ts

@@ -0,0 +1,98 @@
+import { MetaData } from "../interfaces/meta-data";
+import { Dictionary } from "@ngrx/entity";
+import { QueryParamsHandling } from "@angular/router";
+import { getFactory } from "../functions/sort-data-function";
+
+export function createLinkCreatorDict<T>(metaDatas: MetaData<T>[]){
+  return metaDatas.reduce((acc, md) => {
+    if(md.additional?.link){ acc[md.key] = createLinkCreator(md)}
+    return acc;
+  }, {} as Dictionary<LinkInfo>)
+}
+
+function createLinkCreator<T>(metaData: MetaData<T>): LinkInfo{
+  const target = metaData.additional?.link?.target || '_blank';
+  const useRouterLink = metaData.additional?.link?.useRouterLink || false;
+  const hasRoute = !!metaData.additional?.link?.interpolatedRoute;
+
+  const qp = useRouterLink ?
+    metaData.additional!.link!.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
+      map[key] = typeof value === 'function' ? value : parseInterpolated(value);
+      return map;
+    }, {})
+    : undefined;
+
+  const routerLinkOptions = useRouterLink ? {
+    queryParams: (element: T) => metaData.additional!.link!.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
+      map[key] = qp![key](element);
+      return map;
+    }, {}) ?? null,
+    fragment: metaData.additional!.link?.routerLinkOptions?.fragment,
+    preserveFragment: metaData.additional!.link!.routerLinkOptions?.preserveFragment ?? false,
+    queryParamsHandling: metaData.additional!.link!.routerLinkOptions?.queryParamsHandling ?? '',
+  }
+    : undefined;
+
+  if(hasRoute) {
+    const value = metaData.additional!.link!.interpolatedRoute!;
+    return ({
+      link: typeof value === 'function' ? (element: T) => value(element) : parseInterpolated(value),
+      target,
+      useRouterLink,
+      routerLinkOptions,
+    });
+  } else {
+    const slashIfNeeded = !metaData.additional?.link?.base?.endsWith('/') ? '/' : '';
+    const base = metaData.additional!.link?.base;
+    const getKey = key(metaData);
+    return ({
+      link: (element: T) => `${base}${slashIfNeeded}${getKey(element)}`,
+      target,
+      useRouterLink,
+      routerLinkOptions,
+    });
+  }
+}
+
+const key = (metaData : MetaData) => metaData.additional!.link?.urlKey ?
+  getFactory(metaData.additional!.link!.urlKey as string)
+  :
+  getFactory(metaData.key);
+
+export interface LinkInfo {
+  link: (element: any) => string;
+  target: string;
+  useRouterLink: boolean;
+  routerLinkOptions?: {
+    queryParams: (element: any) => any;
+    fragment?: string;
+    preserveFragment?: boolean;
+    queryParamsHandling?: QueryParamsHandling;
+  }
+}
+
+function parseInterpolated(input: string) {
+  // Match either content inside curly braces or content between curly braces
+  const parts = input.split(/({[\w.]+})/);
+
+  const result = parts
+    .filter(part => part !== '') // Remove empty strings
+    .map(part => {
+      if(part.startsWith('{') && part.endsWith('}')) {
+        // For interpolated values, remove the curly braces
+        return {
+          type: 'interpolated',
+          val: getFactory(part.slice(1, -1))
+        };
+      } else {
+        return {
+          type: 'string',
+          val: part
+        };
+      }
+    }) as ({type: 'string', val:string} | {type:'interpolated', val: (t:any) => string})[];
+
+  return function(val: any){
+    return result.map(part => part.type === 'string' ? part.val : part.val(val)).join('');
+  }
+}

package/src/table-builder/services/table-template-service.ts

@@ -0,0 +1,47 @@
+import { EnvironmentInjector, createComponent, inject } from "@angular/core";
+import { Injectable, TemplateRef } from "@angular/core";
+import { ArrayAdditional, ArrayStyle, FieldType, MetaData } from "../interfaces/meta-data";
+import { InitializationComponent } from "../components/initialization-component/initialization.component";
+import { TableBuilderConfigToken } from "../classes/TableBuilderConfig";
+
+@Injectable({ providedIn: 'root' })
+export class TableTemplateService {
+  environmentInjector = inject(EnvironmentInjector);
+  tableConfig = inject(TableBuilderConfigToken);
+  initConfig = createComponent(InitializationComponent, {
+    environmentInjector: this.environmentInjector,
+  });
+  initializationComponentInstance = this.initConfig.instance;
+  getTemplate(metaData: MetaData) : TemplateRef<any> {
+
+    if(metaData.fieldType === FieldType.Array){
+      const arrayStyle = metaData.additional?.arrayStyle ?? this.tableConfig?.arrayDefaults?.arrayStyle;
+      return arrayStyle === ArrayStyle.NewLine
+        ? this.initializationComponentInstance.$arrayNewLineTemplate()
+        : this.initializationComponentInstance.$arrayCommaTemplate();
+    }
+
+    if(metaData.fieldType === FieldType.ImageUrl) {
+      return this.initializationComponentInstance.$imageUrlTemplate();
+    }
+
+    const useIcon = metaData.useIcon || (metaData.fieldType === FieldType.Boolean && metaData.useIcon !== false);
+    if(metaData.additional?.link){
+      const router = metaData.additional?.link?.useRouterLink;
+      if(router) {
+        return useIcon
+          ? this.initializationComponentInstance.$routerLinkWithIconTemplate()
+          : this.initializationComponentInstance.$routerLinkTemplate();
+      }
+      return useIcon
+        ? this.initializationComponentInstance.$linkWithIconTemplate()!
+        : this.initializationComponentInstance.$linkTemplate();
+    }
+
+    if(useIcon){
+      return this.initializationComponentInstance.$defaultWithIcon();
+    }
+
+    return this.initializationComponentInstance.$defaultTemplate();
+  }
+}