Merge pull request #3083 from eduardmarcinco/onpush/batch-1

feat: convert components to use OnPush change detection strategy
carbon-design-system · Dec 17, 2024 · b2368b7 · b2368b7
2 parents f3a9173 + c367c9e
commit b2368b7
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 19 deletions.
diff --git a/src/accordion/accordion-item.component.ts b/src/accordion/accordion-item.component.ts
@@ -4,7 +4,8 @@ import {
 	HostBinding,
 	Output,
 	TemplateRef,
-	EventEmitter
+	EventEmitter,
+	ChangeDetectionStrategy
 } from "@angular/core";
 
 @Component({
@@ -46,7 +47,8 @@ import {
 		:host {
 			display: list-item;
 		}
-	`]
+	`],
+	changeDetection: ChangeDetectionStrategy.OnPush	 
 })
 export class AccordionItem {
 	static accordionItemCount = 0;

diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts
@@ -3,7 +3,8 @@ import {
 	Input,
 	ContentChildren,
 	QueryList,
-	AfterContentInit
+	AfterContentInit,
+	ChangeDetectionStrategy
 } from "@angular/core";
 import { AccordionItem } from "./accordion-item.component";
 
@@ -33,7 +34,8 @@ import { AccordionItem } from "./accordion-item.component";
 			role="list">
 			<ng-content />
 		</div>
-	`
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class Accordion implements AfterContentInit {
 	/**

diff --git a/src/breadcrumb/breadcrumb-item.component.ts b/src/breadcrumb/breadcrumb-item.component.ts
@@ -4,14 +4,19 @@ import {
 	Input,
 	Output,
 	EventEmitter,
-	Optional
+	Optional,
+	ChangeDetectionStrategy
 } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 import { Router } from "@angular/router";
 
 @Component({
 	selector: "cds-breadcrumb-item, ibm-breadcrumb-item",
 	template: `
+		<ng-template #content>
+  			<ng-content />
+		</ng-template>
+
 		@if (useTemplate()) {
 			<a
 				class="cds--link"
@@ -21,9 +26,10 @@ import { Router } from "@angular/router";
 				<ng-container *ngTemplateOutlet="content" />
 			</a>
 		} @else {
-			<ng-content />
+			<ng-container *ngTemplateOutlet="content" />
 		}
-	`
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush	 
 })
 export class BreadcrumbItemComponent {
 	@Input() set href(v: string) {

diff --git a/src/breadcrumb/breadcrumb.component.ts b/src/breadcrumb/breadcrumb.component.ts
@@ -7,7 +7,8 @@ import {
 	TemplateRef,
 	Optional,
 	Output,
-	EventEmitter
+	EventEmitter,
+	ChangeDetectionStrategy
 } from "@angular/core";
 
 import { BreadcrumbItem } from "./breadcrumb-item.interface";
@@ -121,7 +122,8 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 				}
 			}
 		</nav>
-	`
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush	 
 })
 export class Breadcrumb implements AfterContentInit {
 	@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;

diff --git a/src/button/base-icon-button.component.ts b/src/button/base-icon-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
 
 /**
  * Base button with common input properties for configuring icon button.
@@ -7,7 +7,8 @@ import { Component, Input } from "@angular/core";
  * Used by pagination nav icon button, code snippet, etc.
  */
 @Component({
-	template: ""
+	template: "",
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BaseIconButton {
 	/**

diff --git a/src/button/button-set.component.ts b/src/button/button-set.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding } from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core";
 
 /**
  * Get started with importing the module:
@@ -11,7 +11,8 @@ import { Component, HostBinding } from "@angular/core";
  */
 @Component({
 	selector: "cds-button-set, ibm-button-set",
-	template: "<ng-content />"
+	template: "<ng-content />",
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonSet {
 	@HostBinding("class.cds--btn-set") buttonSetClass = true;

diff --git a/src/button/icon-button.component.ts b/src/button/icon-button.component.ts
@@ -1,5 +1,6 @@
 import {
 	AfterViewInit,
+	ChangeDetectionStrategy,
 	Component,
 	ElementRef,
 	EventEmitter,
@@ -53,7 +54,8 @@ import { ButtonSize, ButtonType } from "./button.types";
 			<ng-content />
 		</button>
 	</cds-tooltip>
-	`
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IconButton extends BaseIconButton implements AfterViewInit {
 	/**

diff --git a/src/code-snippet/code-snippet.component.ts b/src/code-snippet/code-snippet.component.ts
@@ -4,7 +4,8 @@ import {
 	HostBinding,
 	ViewChild,
 	AfterViewInit,
-	OnInit
+	OnInit,
+	ChangeDetectionStrategy
 } from "@angular/core";
 
 import { I18n } from "carbon-components-angular/i18n";
@@ -66,9 +67,7 @@ export enum SnippetType {
 					}
 				}
 				@if (!skeleton) {
-					<pre #codeContent (scroll)="(display === 'multi' ? handleScroll() : null)">
-						<code #code><ng-container *ngTemplateOutlet="codeTemplate" /></code>
-					</pre>
+					<pre #codeContent (scroll)="(display === 'multi' ? handleScroll() : null)"><code #code><ng-container *ngTemplateOutlet="codeTemplate" /></code></pre>
 				}
 			</div>
 			@if (hasLeft) {
@@ -135,7 +134,8 @@ export enum SnippetType {
 		<ng-template #codeTemplate>
 			<ng-content />
 		</ng-template>
-	`
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit {
 	@HostBinding("class.cds--snippet") get snippetClass() {