feat(daffio): highlight active tree item in sidebar (#2926)

Author: griest024

apps/daffio/src/app/docs/components/docs-list/docs-list.component.html

@@ -5,7 +5,7 @@
     </ng-template>
 
     <ng-template #daffTreeItemTpl let-node>
-      <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+      <a daffTreeItem [selected]="rla.isActive" routerLinkActive [routerLinkActiveOptions]="ROUTER_LINK_ACTIVE_CONFIG" #rla="routerLinkActive" [node]="node" [routerLink]="node.url">{{ node.title }}</a>
     </ng-template>
   </ul>
 }

apps/daffio/src/app/docs/components/docs-list/docs-list.component.ts

@@ -25,6 +25,10 @@ import {
 
 import { DaffioDocList } from '../../models/doc-list';
 
+const DEFAULT_ROUTER_LINK_ACTIVE_CONFIG: RouterLinkActive['routerLinkActiveOptions'] = {
+  exact: true,
+};
+
 const visit = (guide: DaffioDocList): DaffTreeData<unknown> => ({
   id: guide.id,
   title: guide.title,
@@ -42,11 +46,14 @@ const visit = (guide: DaffioDocList): DaffTreeData<unknown> => ({
     AsyncPipe,
     RouterLink,
     DaffTreeModule,
+    RouterLinkActive,
   ],
 })
 export class DaffioDocsListComponent implements OnInit {
   private _list$ = new BehaviorSubject<DaffioDocList>(null);
 
+  readonly ROUTER_LINK_ACTIVE_CONFIG = DEFAULT_ROUTER_LINK_ACTIVE_CONFIG;
+
   /**
    * The guide list to render
    */
@@ -56,9 +63,6 @@ export class DaffioDocsListComponent implements OnInit {
   }
 
   tree$: Observable<DaffTreeData<unknown>>;
-  activeRouterLinkConfiguration: RouterLinkActive['routerLinkActiveOptions'] = {
-    exact: true,
-  };
 
   ngOnInit(): void {
     this.tree$ = this._list$.pipe(