fix(ui): resolve duplicate rendering of foundation health cards (#202)

Replace CommonModule with NgTemplateOutlet and use property binding
instead of structural directive to fix hydration issues in Angular 19
SSR with zoneless change detection.

LFXV2-890

🤖 Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

apps/lfx-one/src/app/shared/components/metric-card/metric-card.component.html

@@ -29,7 +29,7 @@ <h5 class="text-sm font-medium flex-1">{{ title() }}</h5>
 
       <!-- Body: Chart or Custom Content -->
       @if (customContentTemplate) {
-        <ng-container *ngTemplateOutlet="customContentTemplate"></ng-container>
+        <ng-container [ngTemplateOutlet]="customContentTemplate"></ng-container>
       } @else if (chartData()) {
         <div class="mt-3 w-full h-16">
           <lfx-chart [type]="chartType()" [data]="chartData()!" [options]="chartOptions()" height="100%"></lfx-chart>

apps/lfx-one/src/app/shared/components/metric-card/metric-card.component.ts

@@ -1,7 +1,7 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, ContentChild, input, TemplateRef } from '@angular/core';
 import { ChartComponent } from '@components/chart/chart.component';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -12,7 +12,7 @@ import type { ChartData, ChartOptions, ChartType } from 'chart.js';
 @Component({
   selector: 'lfx-metric-card',
   standalone: true,
-  imports: [CommonModule, ChartComponent, SkeletonModule, TooltipModule],
+  imports: [NgTemplateOutlet, ChartComponent, SkeletonModule, TooltipModule],
   templateUrl: './metric-card.component.html',
 })
 export class MetricCardComponent {