From 75c48942ca708e23dafd1cf8e76b7dcba39fbb42 Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Wed, 4 Dec 2024 16:53:33 +0100
Subject: [PATCH] feat: add template

---
 .../skiplink/skiplink-item/skiplink-item.component.html   | 8 ++++++--
 .../navigation/skiplink/skiplink/skiplink.component.html  | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html
index fe6a4a5b..b4b01c17 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html
+++ b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink-item/skiplink-item.component.html
@@ -1,11 +1,15 @@
 @if (inNav) {
   <li class="visually-hidden-focusable">
     <it-link [href]="href" [externalLink]="externalLink">
-      <ng-content></ng-content>
+      <ng-container *ngTemplateOutlet="linkContent"></ng-container>
     </it-link>
   </li>
 } @else {
   <it-link class="visually-hidden-focusable" [href]="href" [externalLink]="externalLink">
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
   </it-link>
 }
+
+<ng-template #linkContent>
+  <ng-content></ng-content>
+</ng-template>
diff --git a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html
index b4ba4e6d..9102d58c 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html
+++ b/projects/design-angular-kit/src/lib/components/navigation/skiplink/skiplink/skiplink.component.html
@@ -1,11 +1,15 @@
 @if (nav) {
   <nav class="skiplinks">
     <ul>
-      <ng-content></ng-content>
+      <ng-container *ngTemplateOutlet="linkContent"></ng-container>
     </ul>
   </nav>
 } @else {
   <div class="skiplinks">
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="linkContent"></ng-container>
   </div>
 }
+
+<ng-template #linkContent>
+  <ng-content></ng-content>
+</ng-template>