diff --git a/src/dev-app/list/BUILD.bazel b/src/dev-app/list/BUILD.bazel
index 0868a7e75828..c0a9431b3b2e 100644
--- a/src/dev-app/list/BUILD.bazel
+++ b/src/dev-app/list/BUILD.bazel
@@ -13,6 +13,7 @@ ng_module(
"//src/material/button",
"//src/material/icon",
"//src/material/list",
+ "//src/material/slide-toggle",
],
)
diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html
index 5edc6cdfa7d0..e507fea5ab64 100644
--- a/src/dev-app/list/list-demo.html
+++ b/src/dev-app/list/list-demo.html
@@ -2,6 +2,7 @@
@@ -12,7 +13,10 @@
Normal lists
Items
@for (item of items; track item) {
- {{item}}
+
+ {{item}}
+
+
}
@@ -24,6 +28,7 @@
Normal lists
extra line
}
{{contact.headline}}
+
}
diff --git a/src/dev-app/list/list-demo.ts b/src/dev-app/list/list-demo.ts
index 30ff2459576f..068696e34800 100644
--- a/src/dev-app/list/list-demo.ts
+++ b/src/dev-app/list/list-demo.ts
@@ -12,13 +12,21 @@ import {MatButtonModule} from '@angular/material/button';
import {MatListModule, MatListOptionTogglePosition} from '@angular/material/list';
import {MatIconModule} from '@angular/material/icon';
import {CommonModule} from '@angular/common';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@Component({
selector: 'list-demo',
templateUrl: 'list-demo.html',
styleUrls: ['list-demo.css'],
standalone: true,
- imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatListModule],
+ imports: [
+ CommonModule,
+ FormsModule,
+ MatButtonModule,
+ MatIconModule,
+ MatListModule,
+ MatSlideToggleModule,
+ ],
})
export class ListDemo {
items: string[] = ['Pepper', 'Salt', 'Paprika'];
@@ -60,6 +68,7 @@ export class ListDemo {
];
thirdLine = false;
+ showSwitch = false;
showBoxes = false;
infoClicked = false;
selectionListDisabled = false;
diff --git a/src/material/list/list-item-sections.ts b/src/material/list/list-item-sections.ts
index 0ca18e781fec..59eed6e3225b 100644
--- a/src/material/list/list-item-sections.ts
+++ b/src/material/list/list-item-sections.ts
@@ -52,6 +52,21 @@ export class MatListItemLine {
})
export class MatListItemMeta {}
+/**
+ * Directive matching an optional switch for list items.
+ *
+ * List items can reserve space at the end of an item to display a control,
+ * button or additional text content.
+ */
+@Directive({
+ selector: 'mat-slide-toggle[matListItemMeta]',
+ host: {
+ 'class': 'mat-mdc-list-item-switch mdc-list-item__end',
+ },
+ standalone: true,
+})
+export class MatListItemSwitch {}
+
/**
* @docs-private
*
diff --git a/src/material/list/list-item.html b/src/material/list/list-item.html
index e52a1e9491c4..eb36d374f777 100644
--- a/src/material/list/list-item.html
+++ b/src/material/list/list-item.html
@@ -10,6 +10,7 @@
+
diff --git a/src/material/list/list-module.ts b/src/material/list/list-module.ts
index 9f8ca80c1a9a..ede042c51c85 100644
--- a/src/material/list/list-module.ts
+++ b/src/material/list/list-module.ts
@@ -20,6 +20,7 @@ import {
MatListItemMeta,
MatListItemAvatar,
MatListItemIcon,
+ MatListItemSwitch,
} from './list-item-sections';
import {MatNavList} from './nav-list';
import {MatSelectionList} from './selection-list';
@@ -44,6 +45,7 @@ import {ObserversModule} from '@angular/cdk/observers';
MatListItemLine,
MatListItemTitle,
MatListItemMeta,
+ MatListItemSwitch,
],
exports: [
MatList,
diff --git a/src/material/list/list.ts b/src/material/list/list.ts
index 299e6a0b6ada..e3164a7b12a6 100644
--- a/src/material/list/list.ts
+++ b/src/material/list/list.ts
@@ -24,7 +24,12 @@ import {
} from '@angular/core';
import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';
import {MatListBase, MatListItemBase} from './list-base';
-import {MatListItemLine, MatListItemMeta, MatListItemTitle} from './list-item-sections';
+import {
+ MatListItemLine,
+ MatListItemMeta,
+ MatListItemSwitch,
+ MatListItemTitle,
+} from './list-item-sections';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {CdkObserveContent} from '@angular/cdk/observers';
@@ -59,6 +64,7 @@ export class MatList extends MatListBase {}
'[class.mdc-list-item--with-leading-avatar]': '_avatars.length !== 0',
'[class.mdc-list-item--with-leading-icon]': '_icons.length !== 0',
'[class.mdc-list-item--with-trailing-meta]': '_meta.length !== 0',
+ '[class.mdc-list-item--with-trailing-switch]': '_switch.length !== 0',
'[class._mat-animation-noopable]': '_noopAnimations',
'[attr.aria-current]': '_getAriaCurrent()',
},
@@ -72,6 +78,7 @@ export class MatListItem extends MatListItemBase {
@ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList
;
@ContentChildren(MatListItemTitle, {descendants: true}) _titles: QueryList;
@ContentChildren(MatListItemMeta, {descendants: true}) _meta: QueryList;
+ @ContentChildren(MatListItemSwitch, {descendants: true}) _switch: QueryList;
@ViewChild('unscopedContent') _unscopedContent: ElementRef;
@ViewChild('text') _itemText: ElementRef;