fix(components/layout): remove onpush change detection from descripti…

…on list term to dynamically detect inline help inputs from description list content (#2515)
blackbaud · Jul 17, 2024 · 2a5a1d1 · 2a5a1d1
1 parent c7ca3e0
commit 2a5a1d1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/apps/playground/src/app/components/layout/description-list/description-list.component.html b/apps/playground/src/app/components/layout/description-list/description-list.component.html
@@ -1,6 +1,9 @@
 <div class="sky-padding-even-large">
  <sky-description-list mode="vertical">
- <sky-description-list-content *ngFor="let item of items">
+ <sky-description-list-content
+ *ngFor="let item of items"
+ [helpPopoverContent]="showHelp ? inlineHelp : undefined"
+ >
  <sky-description-list-term>
  {{ item.term }}
  <sky-help-inline
@@ -14,7 +17,10 @@
  </sky-description-list-content>
  </sky-description-list>
  <sky-description-list mode="horizontal">
- <sky-description-list-content *ngFor="let item of items">
+ <sky-description-list-content
+ *ngFor="let item of items"
+ [helpPopoverContent]="item.showHelp ? inlineHelp : undefined"
+ >
  <sky-description-list-term>
  {{ item.term }}
  <sky-help-inline
@@ -28,3 +34,7 @@
  </sky-description-list-content>
  </sky-description-list>
 </div>
+<ng-template #inlineHelp>Help</ng-template>
+<button type="button" class="sky-btn sky-btn-default" (click)="toggleHelp()">
+ Toggle help {{ showHelp }}
+</button>
diff --git a/apps/playground/src/app/components/layout/description-list/description-list.component.ts b/apps/playground/src/app/components/layout/description-list/description-list.component.ts
@@ -24,4 +24,10 @@ export class DescriptionListComponent {
  description: '2024',
  },
  ];
+
+ public showHelp = false;
+
+ public toggleHelp(): void {
+ this.showHelp = !this.showHelp;
+ }
 }
diff --git a/libs/components/layout/src/lib/modules/description-list/description-list-term.component.ts b/libs/components/layout/src/lib/modules/description-list/description-list-term.component.ts
@@ -1,10 +1,4 @@
-import {
- ChangeDetectionStrategy,
- Component,
- TemplateRef,
- ViewChild,
- inject,
-} from '@angular/core';
+import { Component, TemplateRef, ViewChild, inject } from '@angular/core';
 
 import { SkyDescriptionListContentComponent } from './description-list-content.component';
 
@@ -17,7 +11,6 @@ import { SkyDescriptionListContentComponent } from './description-list-content.c
  selector: 'sky-description-list-term',
  templateUrl: './description-list-term.component.html',
  styleUrl: './description-list-term.component.scss',
- changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SkyDescriptionListTermComponent {
  @ViewChild('termTemplateRef', {