Add symbol and ISIN

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -171,11 +171,13 @@
           size="medium"
           [locale]="data.locale"
           [value]="transactionCount"
-          ><ng-container *ngIf="transactionCount === 1">Activity</ng-container
-          ><ng-container *ngIf="transactionCount !== 1"
-            >Activities</ng-container
-          ></gf-value
         >
+          @if (transactionCount === 1) {
+            <ng-container i18n>Activity</ng-container>
+          } @else {
+            <ng-container i18n>Activities</ng-container>
+          }
+        </gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value i18n size="medium" [hidden]="!assetClass" [value]="assetClass"
@@ -191,17 +193,15 @@
           >Asset Sub Class</gf-value
         >
       </div>
-      <ng-container
-        *ngIf="
+      @if (
         SymbolProfile?.countries?.length > 0 ||
         SymbolProfile?.sectors?.length > 0
-        "
-      >
+      ) {
         @if (
           SymbolProfile?.countries?.length === 1 &&
           SymbolProfile?.sectors?.length === 1
         ) {
-          <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
+          <div class="col-6 mb-3">
             <gf-value
               i18n
               size="medium"
@@ -210,10 +210,8 @@
               >Sector</gf-value
             >
           </div>
-          <div
-            *ngIf="SymbolProfile?.countries?.length === 1"
-            class="col-6 mb-3"
-          >
+          @if (SymbolProfile?.countries?.length === 1) {
+            <div class="col-6 mb-3">
               <gf-value
                 i18n
                 size="medium"
@@ -222,6 +220,7 @@
                 >Country</gf-value
               >
             </div>
+          }
         } @else {
           <div class="col-md-6 mb-3">
             <div class="h5" i18n>Sectors</div>
@@ -248,13 +247,32 @@
             />
           </div>
         }
-      </ng-container>
-      <div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center">
+      }
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [hidden]="!SymbolProfile?.symbol"
+          [value]="SymbolProfile?.symbol"
+          >Symbol</gf-value
+        >
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          size="medium"
+          [hidden]="!SymbolProfile?.isin"
+          [value]="SymbolProfile?.isin"
+          >ISIN</gf-value
+        >
+      </div>
+
+      @if (dataProviderInfo) {
+        <div class="col-md-12 mb-3 text-center">
           <hr />
-        <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]">
-        </gf-data-provider-credits>
+          <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]" />
           <hr />
         </div>
+      }
     </div>
 
     <mat-tab-group
@@ -308,7 +326,8 @@
       </mat-tab>
     </mat-tab-group>
 
-    <div *ngIf="tags?.length > 0" class="row">
+    @if (tags?.length > 0) {
+      <div class="row">
         <div class="col">
           <div class="h5" i18n>Tags</div>
           <mat-chip-listbox>
@@ -318,13 +337,12 @@
           </mat-chip-listbox>
         </div>
       </div>
+    }
 
-    <div
-      *ngIf="
+    @if (
       activities?.length > 0 && data.hasPermissionToReportDataGlitch === true
-      "
-      class="row"
-    >
+    ) {
+      <div class="row">
         <div class="col">
           <hr />
           <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
@@ -333,6 +351,7 @@
           >
         </div>
       </div>
+    }
   </div>
 </div>