diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
index 70a2777ea..27bd89855 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
@@ -7,6 +7,7 @@ import { FilePreviewStateService } from '../../services/file-preview-state.servi
 import { map } from 'rxjs/operators';
 import { File } from '@red/domain';
 import { FilePreviewDialogService } from '../../services/file-preview-dialog.service';
+import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 
 @Component({
     selector: 'redaction-document-info',
@@ -21,11 +22,16 @@ export class DocumentInfoComponent {
     constructor(
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dialogService: FilePreviewDialogService,
+        private readonly _fileAttributesService: FileAttributesService,
         readonly stateService: FilePreviewStateService,
         readonly permissionsService: PermissionsService,
         readonly documentInfoService: DocumentInfoService,
     ) {
-        this.fileAttributes$ = combineLatest([this.stateService.file$, this.stateService.dossier$]).pipe(
+        this.fileAttributes$ = combineLatest([
+            this.stateService.file$,
+            this.stateService.dossier$,
+            this._fileAttributesService.fileAttributesConfig$,
+        ]).pipe(
             switchMap(([file, dossier]) => this.documentInfoService.fileAttributes$(file.fileId, dossier.id, dossier.dossierTemplateId)),
         );
         this.dossierTemplateName$ = this.stateService.dossier$.pipe(
diff --git a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html
index a8f4e073f..938cc81f9 100644
--- a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.html
@@ -1,23 +1,25 @@
-<div>
-    <div
-        [class.error]="file.isError"
-        [class.initial-processing]="file.isInitialProcessing"
-        [matTooltip]="file.filename"
-        [iqserHelpMode]="'document_in_editor'"
-        [scrollableParentView]="scrollableParentView"
-        class="table-item-title"
-        matTooltipPosition="above"
-    >
-        {{ file.filename }}
+<ng-container *ngIf="componentContext$ | async as ctx">
+    <div>
+        <div
+            [class.error]="file.isError"
+            [class.initial-processing]="file.isInitialProcessing"
+            [matTooltip]="file.filename"
+            [iqserHelpMode]="'document_in_editor'"
+            [scrollableParentView]="scrollableParentView"
+            class="table-item-title"
+            matTooltipPosition="above"
+        >
+            {{ file.filename }}
+        </div>
     </div>
-</div>
 
-<div *ngIf="primaryAttribute" class="small-label">
-    <div class="primary-attribute">
-        <span [matTooltip]="primaryAttribute" matTooltipPosition="above">
-            {{ primaryAttribute }}
-        </span>
+    <div *ngIf="primaryAttribute" class="small-label">
+        <div class="primary-attribute">
+            <span [matTooltip]="primaryAttribute" matTooltipPosition="above">
+                {{ primaryAttribute }}
+            </span>
+        </div>
     </div>
-</div>
 
-<redaction-file-stats [file]="file"></redaction-file-stats>
+    <redaction-file-stats [file]="file"></redaction-file-stats>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
index ddb983239..08184aeb5 100644
--- a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
@@ -1,7 +1,9 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { PrimaryFileAttributeService } from '@services/primary-file-attribute.service';
-import { FileAttributes } from '@red/domain';
-import { ScrollableParentView, ScrollableParentViews } from '@iqser/common-ui';
+import { Dossier, File, FileAttributes } from '@red/domain';
+import { ContextComponent, ScrollableParentView, ScrollableParentViews } from '@iqser/common-ui';
+import { FileAttributesConfigMap, FileAttributesService } from '@services/entity-services/file-attributes.service';
+import { tap } from 'rxjs/operators';
 
 interface PartialFile {
     readonly isError: boolean;
@@ -14,21 +16,39 @@ interface PartialFile {
     readonly lastManualChangeDate?: string;
 }
 
+interface FileNameColumnContext {
+    fileAttributesConfig: FileAttributesConfigMap;
+}
+
 @Component({
     selector: 'redaction-file-name-column',
     templateUrl: './file-name-column.component.html',
     styleUrls: ['./file-name-column.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FileNameColumnComponent implements OnChanges {
+export class FileNameColumnComponent extends ContextComponent<FileNameColumnContext> implements OnInit {
     @Input() file: PartialFile;
     @Input() dossierTemplateId: string;
     primaryAttribute: string;
 
-    constructor(private readonly _primaryFileAttributeService: PrimaryFileAttributeService) {}
+    constructor(
+        private readonly _fileAttributeService: FileAttributesService,
+        private readonly _primaryFileAttributeService: PrimaryFileAttributeService,
+        private readonly _changeDetectorRef: ChangeDetectorRef,
+    ) {
+        super();
+    }
 
-    ngOnChanges() {
-        this.primaryAttribute = this._primaryFileAttributeService.getPrimaryFileAttributeValue(this.file, this.dossierTemplateId);
+    ngOnInit(): void {
+        const fileAttributesConfig$ = this._fileAttributeService.fileAttributesConfig$.pipe(
+            tap(() => {
+                this.primaryAttribute = this._primaryFileAttributeService.getPrimaryFileAttributeValue(this.file, this.dossierTemplateId);
+                this._changeDetectorRef.detectChanges();
+            }),
+        );
+        super._initContext({
+            fileAttributesConfig: fileAttributesConfig$,
+        });
     }
 
     get scrollableParentView(): ScrollableParentView {
diff --git a/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts b/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts
index 7a7c068f3..e23363a5b 100644
--- a/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts
@@ -4,7 +4,7 @@ import { BehaviorSubject, Observable, of } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
 import { FileAttributeConfig, FileAttributes, IFileAttributeConfig, IFileAttributesConfig } from '@red/domain';
 
-type FileAttributesConfigMap = Readonly<Record<string, IFileAttributesConfig>>;
+export type FileAttributesConfigMap = Readonly<Record<string, IFileAttributesConfig>>;
 
 @Injectable({
     providedIn: 'root',
@@ -12,7 +12,7 @@ type FileAttributesConfigMap = Readonly<Record<string, IFileAttributesConfig>>;
 export class FileAttributesService extends EntitiesService<IFileAttributeConfig, FileAttributeConfig> {
     protected readonly _defaultModelPath = 'fileAttributes';
     protected readonly _entityClass = FileAttributeConfig;
-    readonly #fileAttributesConfig$ = new BehaviorSubject<FileAttributesConfigMap>({});
+    readonly fileAttributesConfig$ = new BehaviorSubject<FileAttributesConfigMap>({});
 
     /**
      * Get the file attributes that can be used at importing csv.
@@ -23,8 +23,8 @@ export class FileAttributesService extends EntitiesService<IFileAttributeConfig,
         return request$.pipe(
             tap(entities => entities.fileAttributeConfigs.sort((c1, c2) => c1.placeholder.localeCompare(c2.placeholder))),
             tap(entities =>
-                this.#fileAttributesConfig$.next({
-                    ...this.#fileAttributesConfig$.value,
+                this.fileAttributesConfig$.next({
+                    ...this.fileAttributesConfig$.value,
                     [dossierTemplateId]: entities,
                 }),
             ),
@@ -33,7 +33,7 @@ export class FileAttributesService extends EntitiesService<IFileAttributeConfig,
     }
 
     getFileAttributeConfig(dossierTemplateId: string): IFileAttributesConfig | undefined {
-        return this.#fileAttributesConfig$.value[dossierTemplateId];
+        return this.fileAttributesConfig$.value[dossierTemplateId];
     }
 
     /**