From 6969f76f1df607aaf3d69b68d021ba88a6ac5b12 Mon Sep 17 00:00:00 2001
From: Yasa-Nataliya <yasa.nataliya@globallogic.com>
Date: Fri, 22 Sep 2023 14:59:04 +0530
Subject: [PATCH] [ACS-5645] Modified the changes

---
 .../categories-management.component.html      |  6 +-
 .../categories-management.component.scss      |  4 -
 .../categories-management.component.spec.ts   | 38 +++++--
 .../categories-management.component.ts        |  8 ++
 .../content-metadata.component.html           | 32 +++---
 .../content-metadata.component.spec.ts        | 98 ++++++++++++++++++-
 .../content-metadata.component.ts             | 38 +++----
 lib/content-services/src/lib/i18n/en.json     |  2 +-
 .../tags-creator/tags-creator.component.html  |  2 +-
 9 files changed, 166 insertions(+), 62 deletions(-)

diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
index 472486d774..879cb02275 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
@@ -1,5 +1,5 @@
 <div class="adf-categories-management">
-    <div *ngIf="((!categoryNameControlVisible && categories.length)) || categoryNameControlVisible"
+    <div *ngIf="isNameCategoryVisible"
          class="adf-category-name-field">
         <mat-form-field  appearance="fill">
             <input #categoryNameInput
@@ -10,7 +10,7 @@
                placeholder="{{'CATEGORIES_MANAGEMENT.INPUT_PLACEHOLDER' | translate }}"
                adf-auto-focus 
                />
-            <mat-error [hidden]="!categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
+            <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
         </mat-form-field>
     </div>
     <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
@@ -30,7 +30,7 @@
             </button>
         </span>
     </div>
-    <p *ngIf="!categories.length" class="adf-no-categories-message">
+    <p *ngIf="!isEmpty" class="adf-no-categories-message">
         {{ noCategoriesMsg | translate }}
     </p>
 </div>
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
index e6cb8593d3..e5754941ba 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
@@ -22,10 +22,6 @@
             display: none;
         }
 
-        .mat-form-field-wrapper {
-            width: 100%;
-        }
-
         .mat-form-field-appearance-fill {
             .mat-form-field-flex {
                 background: none;
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
index 8f886d5fb6..c4ce59e01f 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
@@ -220,17 +220,38 @@ describe('CategoriesManagementComponent', () => {
                 component.categoryNameControlVisible = true;
                 fixture.detectChanges();
             });
-            it('should not hide category name control when categoryNameControlVisible is false', () => {
-                component.categoryNameControlVisible = false;
-                fixture.detectChanges();
-                const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement;
-                expect(categoryControl.hidden).toBeFalse();
-            });
 
             it('should be visible when categoryNameControlVisible is true', () => {
                 const categoryControl = fixture.debugElement.query(By.css('.adf-category-name-field'));
                 expect(categoryControl).toBeTruthy();
             });
+
+            it('should return true when categoryNameControlVisible is true', () => {
+                component.categoryNameControlVisible = true;
+                const result = component.isNameCategoryVisible;
+                expect(result).toBeTrue();
+            });
+
+            it('should return false when categoryNameControlVisible is false and categories length is 0', () => {
+                component.categoryNameControlVisible = false;
+                component.categories = [];
+                const result = component.isNameCategoryVisible;
+                expect(result).toBeFalse();
+            });
+        });
+
+        describe('isEmpty', () => {
+            it('should return true when categories is not empty', () => {
+                component.categories = [category3, category4];
+                const result = component.isEmpty;
+                expect(result).toBeTrue();
+            });
+
+            it('should return false when categories is empty', () => {
+                component.categories = [];
+                const result = component.isEmpty;
+                expect(result).toBeFalse();
+            });
         });
 
         describe('Spinner', () => {
@@ -449,11 +470,8 @@ describe('CategoriesManagementComponent', () => {
             expect(categoriesChangeSpy).toHaveBeenCalledOnceWith(component.categories);
         }));
 
-        it('should clear and not hide input after category is created', fakeAsync(() => {
+        it('should clear input after category is created', fakeAsync(() => {
             createCategory('test');
-            const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement;
-
-            expect(categoryControl.hidden).toBeFalse();
             expect(getExistingCategoriesList()).toEqual([]);
             expect(component.categoryNameControl.value).toBe('');
             expect(component.categoryNameControl.untouched).toBeTrue();
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
index 12fdd4dfd5..1ea557a851 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
@@ -177,10 +177,18 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
         this.cancelExistingCategoriesLoading$.complete();
     }
 
+    get isNameCategoryVisible(): boolean {
+        return (!this.categoryNameControlVisible && this.categories.length > 0) || this.categoryNameControlVisible;
+    }
+
     get categoryNameControl(): FormControl<string> {
         return this._categoryNameControl;
     }
 
+    get isEmpty(): boolean {
+        return this.categories?.length > 0;
+    }
+
     get existingCategories(): Category[] {
         return this._existingCategories;
     }
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
index f675b1266b..01c76c53dc 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
@@ -5,18 +5,18 @@
                              [expanded]="canExpandProperties()"
                              [attr.data-automation-id]="'adf-metadata-group-properties'"
                              hideToggle
-                             (opened)="handleGeneralInfoPanelState()"
-                             (closed)="handleGeneralInfoPanelState()">
+                             (opened)="toggleGeneralInfoPanel()"
+                             (closed)="toggleGeneralInfoPanel()">
             <mat-expansion-panel-header>
                 <div class="adf-metadata-properties-panel-content">
                     <mat-icon>
-                        {{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}
+                        {{ isGeneralInfoPanelVisible ? 'expand_more' : 'chevron_right'}}
                     </mat-icon>
                     <mat-panel-title class="adf-metadata-properties-title">
                         {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
                     </mat-panel-title>
                 </div>
-                <button *ngIf="!editable && !readOnly && hasAllowableOperations"
+                <button *ngIf="canToggleEdit"
                         mat-icon-button
                         (click)="toggleEdit($event, group, buttonType.GeneralInfo)"
                         [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -56,21 +56,21 @@
         </mat-expansion-panel>
         <ng-container *ngIf="displayTags">
             <mat-expansion-panel 
-                            (opened)="handleTagsPanelState(true)"
-                            (closed)="handleTagsPanelState(false)"
+                            (opened)="toggleTagsPanel(true)"
+                            (closed)="toggleTagsPanel(false)"
                             hideToggle
-                            [expanded]="tagsPanelState">
+                            [expanded]="isTagPanelVisible">
                 <mat-expansion-panel-header>
                     <div class="adf-metadata-properties-panel-content">
                         <mat-icon>
-                            {{ tagsPanelState ? 'expand_more' : 'chevron_right'}}
+                            {{ isTagPanelVisible ? 'expand_more' : 'chevron_right'}}
                         </mat-icon>
                         <mat-panel-title class="adf-metadata-properties-title">
                             {{ 'METADATA.BASIC.TAGS' | translate }}
                         </mat-panel-title>
                     </div>
                     <div class="adf-tags-buttons">
-                        <button *ngIf="!editableTags && !readOnly && hasAllowableOperations"
+                        <button *ngIf="canTagsToggleEdit"
                                 mat-icon-button
                                 (click)="toggleEdit($event, group, buttonType.Tags)"
                                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -103,7 +103,7 @@
                     class="adf-metadata-properties-tags">
                     <span *ngFor="let tag of tags" class="adf-metadata-properties-tag">{{ tag }}</span>
                 </div>
-                <div *ngIf="!tags.length && !editableTags" class="adf-metadata-no-item-added">
+                <div *ngIf="hasTags()" class="adf-metadata-no-item-added">
                     {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
                 </div>
                 <div *ngIf="editableTags" class="adf-metadata-properties-tags">
@@ -122,22 +122,22 @@
                             (opened)="handleCategoriesPanelState(true)"
                             (closed)="handleCategoriesPanelState(false)"
                             hideToggle
-                            [expanded]="categoriesPanelState">
+                            [expanded]="isCategoriesPanelVisible">
                 <mat-expansion-panel-header>
                     <div class="adf-metadata-properties-panel-content">
                         <mat-icon>
-                            {{ categoriesPanelState ? 'expand_more' : 'chevron_right'}}</mat-icon>
+                            {{ isCategoriesPanelVisible ? 'expand_more' : 'chevron_right'}}</mat-icon>
                         <mat-panel-title class="adf-metadata-properties-title">
                             {{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }}
                         </mat-panel-title>
                     </div>
                     <div class="adf-metadata-categories-title">
-                        <button *ngIf="!editableCategories && !readOnly && hasAllowableOperations"
+                        <button *ngIf="canCategoriesToggleEdit"
                                 mat-icon-button
                                 (click)="toggleEdit($event, group, buttonType.Categories)"
                                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                                 [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
-                                data-automation-id="meta-data-card-toggle-categories-edit"
+                                data-automation-id="meta-data-categories-edit"
                                 class="adf-edit-icon-buttons">
                             <mat-icon>mode_edit</mat-icon>
                         </button>
@@ -163,7 +163,7 @@
                 <div *ngIf="!editableCategories">
                     <p *ngFor="let category of categories" class="adf-metadata-categories">{{ category.name }}</p>
                 </div>
-                <div *ngIf="!categories.length && !editableCategories" class="adf-metadata-no-item-added">
+                <div *ngIf="hasCategories()" class="adf-metadata-no-item-added">
                     {{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
                 </div>
                 <div *ngIf="editableCategories" class="adf-metadata-categories-header">
@@ -200,7 +200,7 @@
                                     {{ group.title | translate }}
                                 </mat-panel-title>
                             </div>
-                            <button *ngIf="!group.editable && !readOnly && hasAllowableOperations"
+                            <button *ngIf="canGroupToggleEdit(group)"
                                     mat-icon-button
                                     [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                                     [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
index 680e8c76ff..40a7095b2e 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
@@ -104,6 +104,10 @@ describe('ContentMetadataComponent', () => {
     const findTagsCreator = (): TagsCreatorComponent => fixture.debugElement.query(By.directive(TagsCreatorComponent))?.componentInstance;
 
     const findShowingTagInputButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('.adf-tags-buttons')).nativeElement;
+    const getToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-general-info-edit"]'));
+    const getTagsToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="showing-tag-input-button"]'));
+    const getCategoriesToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-categories-edit"]'));
+    const getGroupToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
 
     /**
      * Get metadata categories
@@ -459,7 +463,7 @@ describe('ContentMetadataComponent', () => {
         it('should toggle Tags editing mode', () => {
             component.editableTags = false;
             component.toggleEdit(mockEvent, mockGroup, ButtonType.Tags);
-            expect(component.tagsPanelState).toBe(component.editableTags);
+            expect(component.isTagPanelVisible).toBe(component.editableTags);
             expect(component.tagNameControlVisible).toBe(true);
             expect(component.editableCategories).toBe(false);
             expect(component.editableGroup.editable).toBe(false);
@@ -468,7 +472,7 @@ describe('ContentMetadataComponent', () => {
         it('should toggle Categories editing mode', () => {
             component.editableCategories = false;
             component.toggleEdit(mockEvent, mockGroup, ButtonType.Categories);
-            expect(component.categoriesPanelState).toBe(component.editableCategories);
+            expect(component.isCategoriesPanelVisible).toBe(component.editableCategories);
             expect(component.categoryControlVisible).toBe(true);
             expect(component.editableTags).toBe(false);
             expect(component.editableGroup.editable).toBe(false);
@@ -485,10 +489,10 @@ describe('ContentMetadataComponent', () => {
 
         it('should show Snackbar when Editing Panel is Active', () => {
             spyOn(component, 'isEditingPanel').and.returnValue(true);
-            spyOn(component, 'showSnackbar');
+            spyOn(component, 'showSnackbarError');
             component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo);
             expect(component.isEditingPanel).toHaveBeenCalled();
-            expect(component.showSnackbar).toHaveBeenCalledWith('METADATA.BASIC.SNACKBAR_MESSAGE');
+            expect(component.showSnackbarError).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
         });
     });
 
@@ -523,6 +527,92 @@ describe('ContentMetadataComponent', () => {
             expect(group.editable).toBe(true);
         });
     });
+;
+    describe('Permission', () => {
+        it('should hide the general info edit button if node does not have `update` permissions', () => {
+            component.readOnly = false;
+            component.node.allowableOperations = null;
+            fixture.detectChanges();
+
+            expect(getToggleEditButton()).toBeNull();
+        });
+
+        it('should hide the tags edit button if node does not have `update` permissions', () => {
+            component.readOnly = false;
+            component.node.allowableOperations = null;
+            fixture.detectChanges();
+
+            expect(getTagsToggleEditButton()).toBeNull();
+        });
+
+        it('should hide the categories edit button if node does not have `update` permissions', () => {
+            component.readOnly = false;
+            component.node.allowableOperations = null;
+            fixture.detectChanges();
+
+            expect(getCategoriesToggleEditButton()).toBeNull();
+        });
+
+        it('should hide the groups edit button if node does not have `update` permissions', () => {
+            component.readOnly = false;
+            component.node.allowableOperations = null;
+            fixture.detectChanges();
+
+            expect(getGroupToggleEditButton()).toBeNull();
+        });
+    });
+
+    describe('canToggleEdit', () => {
+        it('should return true when editable is false, readOnly is false, and hasAllowableOperations is true', () => {
+            component.editable = false;
+            component.readOnly = false;
+            component.hasAllowableOperations = true;
+            const result = component.canToggleEdit;
+            expect(result).toBe(true);
+          });
+
+        it('should return false when editable is true', () => {
+            component.editable = true;
+            component.readOnly = false;
+            component.hasAllowableOperations = true;
+            const result = component.canToggleEdit;
+            expect(result).toBe(false);
+        });
+    });
+
+    describe('canTagsToggleEdit', () => {
+        it('should have canTagsToggleEdit property as expected', () => {
+            component.editableTags = false;
+            component.readOnly = false;
+            component.hasAllowableOperations = true;
+            fixture.detectChanges();
+            expect(component.canTagsToggleEdit).toBe(true);
+        });
+    });
+
+    describe('canGroupToggleEdit', () => {
+        it('should return true when group is not editable, not read-only, and has allowable operations', () => {
+            component.readOnly = false;
+            component.hasAllowableOperations = true;
+            const group: CardViewGroup = {
+                title: 'Group Title',
+                properties: [],
+                expanded: true,
+                editable: false
+            };
+            const result = component.canGroupToggleEdit(group);
+            expect(result).toBe(true);
+        });
+    });
+
+    describe('canCategoriesToggleEdit', () => {
+        it('should have canCategoriesToggleEdit property as expected', () => {
+            component.editableCategories = false;
+            component.readOnly = false;
+            component.hasAllowableOperations = true;
+            expect(component.canCategoriesToggleEdit).toBe(true);
+        });
+    });
 
     describe('Reseting', () => {
         it('should reset properties on reset click', async () => {
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
index f953b062d5..47d86f50ea 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
@@ -147,19 +147,12 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     @Output()
     editableCategoriesChange = new EventEmitter<boolean>();
 
-    /** Emitted when content's group state is changed. **/
-    @Output()
-    groupChange = new EventEmitter<CardViewGroup>();
-
     @Input()
     editableCategories = false;
 
     @Input()
     editableTags = false;
 
-    @Input()
-    group: CardViewGroup;
-
     private _assignedTags: string[] = [];
     private assignedTagsEntries: TagEntry[] = [];
     private _editable = false;
@@ -181,12 +174,13 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     categoriesManagementMode = CategoriesManagementMode.ASSIGN;
     categoryControlVisible = false;
     classifiableChanged = this.classifiableChangedSubject.asObservable();
-    generalInfoPanelState: boolean;
-    tagsPanelState: boolean;
-    categoriesPanelState: boolean;
+    isGeneralInfoPanelVisible: boolean;
+    isTagPanelVisible: boolean;
+    isCategoriesPanelVisible: boolean;
     hasAllowableOperations = false;
     editableGroup: CardViewGroup;
     buttonType = ButtonType;
+    group: CardViewGroup;
 
     constructor(
         private contentMetadataService: ContentMetadataService,
@@ -369,13 +363,14 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         );
     }
 
-    showSnackbar(message: string): void {
+    showSnackbarError(message: string): void {
         this.notificationService.showError(message);
     }
 
     toggleEdit(event: MouseEvent, group: CardViewGroup, buttonType: ButtonType): void {
+        event.stopPropagation();
         if (this.isEditingPanel()) {
-            this.showSnackbar('METADATA.BASIC.SNACKBAR_MESSAGE');
+            this.showSnackbarError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
             return;
         }
 
@@ -383,8 +378,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
             this.editableGroup.editable = false;
         }
 
-        event.stopPropagation();
-
         switch (buttonType) {
             case ButtonType.GeneralInfo:
                 this.editable = !this.editable;
@@ -397,20 +390,19 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
             case ButtonType.Tags:
                 this.editableTags = !this.editableTags;
                 this.editableTagsChange.emit(this.editableTags);
-                this.tagsPanelState = this.editableTags;
+                this.isTagPanelVisible = this.editableTags;
                 this.tagNameControlVisible = true;
                 break;
 
             case ButtonType.Categories:
                 this.editableCategories = !this.editableCategories;
                 this.editableCategoriesChange.emit(this.editableCategories);
-                this.categoriesPanelState = this.editableCategories;
+                this.isCategoriesPanelVisible = this.editableCategories;
                 this.categoryControlVisible = true;
                 break;
 
             case ButtonType.Group:
                 group.editable = !group.editable;
-                this.groupChange.emit(group);
                 this.editableGroup = group.editable ? group : null;
                 if (group.editable) {
                     group.expanded = true;
@@ -434,18 +426,18 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         }
     }
 
-    handleGeneralInfoPanelState() {
-        this.generalInfoPanelState = !this.generalInfoPanelState;
+    toggleGeneralInfoPanel() {
+        this.isGeneralInfoPanelVisible = !this.isGeneralInfoPanelVisible;
         this.cdr.detectChanges();
     }
 
-    handleTagsPanelState(tagPanelState: boolean) {
-        this.tagsPanelState = tagPanelState;
+    toggleTagsPanel(tagPanelState: boolean) {
+        this.isTagPanelVisible = tagPanelState;
         this.cdr.detectChanges();
     }
 
-    handleCategoriesPanelState(categoriesPanelState: boolean) {
-        this.categoriesPanelState = categoriesPanelState;
+    handleCategoriesPanelState(isCategoriesPanelVisible: boolean) {
+        this.isCategoriesPanelVisible = isCategoriesPanelVisible;
         this.cdr.detectChanges();
     }
 
diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index dbd84248fc..8cb5cc820f 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -495,7 +495,7 @@
       "HEADER_TITLE": "General info",
       "NO_TAGS_ADDED": "There are currently no tags added",
       "NO_ITEMS_MESSAGE": "There are currently no {{ groupTitle }} added",
-      "SNACKBAR_MESSAGE": "Save or discard changes to continue"
+      "SAVE_OR_DISCARD_CHANGES": "Save or discard changes to continue"
     },
     "CONTENT_TYPE": {
       "DIALOG" :{
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
index ea18f7f1c5..3b0199eb24 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
@@ -9,7 +9,7 @@
                     adf-auto-focus
                     placeholder="{{'TAG.TAGS_CREATOR.INPUT_PLACEHOLDER' | translate}}" 
             />
-            <mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
+            <mat-error *ngIf="tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
         </mat-form-field >
     </div>
     <p