style and more html content

src/app/app.component.html

@@ -3,9 +3,40 @@ <h1>Ngcx Tree Samples</h1>
   Ngcx tree allows to render a tree and allows drag n drop only using the
   &#64;angular/cdk dependency.
 </p>
-<p>To see the fired events open your dev tools and check console log.</p>
+<p class="hint">
+  To see the fired events open your dev tools and check console log.
+</p>
+<h2>References</h2>
+<ul>
+  <li>
+    Gitlab:
+    <a href="https://github.com/cluetec/ngcx-tree">
+      https://github.com/cluetec/ngcx-tree</a
+    >
+  </li>
+  <li>
+    Npm:
+    <a href="https://www.npmjs.com/package/&#64;cluetec/ngcx-tree"
+      >https://www.npmjs.com/package/&#64;cluetec/ngcx-tree</a
+    >
+  </li>
+</ul>
+<h2>Samples overview</h2>
+<ul>
+  @for (sample of samples;track sample.title) {
+  <li>
+    <a [href]="'#' + sample.title">{{ sample.title }}</a>
+  </li>
+  }
+</ul>
+
 @for (sample of samples;track sample.title) {
-<app-ngcx-tree-sample-viewer [sample]="sample"></app-ngcx-tree-sample-viewer>
+<app-ngcx-tree-sample-viewer
+  [id]="sample.title"
+  [sample]="sample"
+></app-ngcx-tree-sample-viewer>
+<br />
+<br />
 }
 <ng-template #treeNodeTemplate let-nodeWrapper="nodeWrapper">
   <div class="node-container">

src/app/app.component.scss

@@ -0,0 +1,6 @@
+.hint {
+  background-color: lightsalmon;
+  padding: 10px;
+  border-radius: 5px;
+  font-weight: bold;
+}

src/app/print-methods.pipe.ts

@@ -10,7 +10,6 @@ export class PrintMethodsPipe implements PipeTransform {
 
   printMethods(value: any) {
     let result = value;
-    console.log(value);
     if (typeof value == 'function') {
       if (value.name) {
         result = value.name;