[FEAT] Make design components hydration compatible

[griest024]

We should avoid direct DOM manipulation in design components as this will break hydration. Its also an open issue that template outlets break hydration and require a workaround. This issue should track the various instances of design components that currently have hydration-incompatible implementations:

• paginator:

  daffodil/libs/design/paginator/src/paginator/paginator.component.ts

  Lines 71 to 72 in 2576642

  	const ariaLabel = elementRef.nativeElement.attributes['aria-label'];
  	this._paginatorId = ariaLabel ? ariaLabel.nodeValue : null;

• toast:

  daffodil/libs/design/toast/src/toast/toast-template.component.ts

  Line 57 in 2576642

  <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>

• tabs:

  daffodil/libs/design/tabs/src/tabs/tabs.component.html

  Line 15 in 2576642

  <ng-container *ngTemplateOutlet="tab.labelRef"></ng-container>

  and

  daffodil/libs/design/tabs/src/tabs/tabs.component.html

  Line 22 in 2576642

  <ng-container *ngTemplateOutlet="tab.contentRef"></ng-container>

• tree:

  daffodil/libs/design/tree/src/tree/tree.component.html

  Line 5 in 2576642

  *ngTemplateOutlet="node.hasChildren ? withChildrenTemplate : treeItemTemplate; context: { $implicit: node }">

[xelaint]

@griest024 So does this mean we're not able to use ngTemplateOutlet at all?

[griest024]

@griest024 So does this mean we're not able to use ngTemplateOutlet at all?

No, we can use it, but we have to place an <ng-content /> at the beginning of the template whenever we do. Its a weird workaround but its the offically recommended one.