-
-
- - - {{item}} - + @for (item of data; track item; let i = $index) { +
- + + {{item}} + + }
| Header {{column}} | -{{column}} | -Footer {{column}} | -Header {{column}} | +{{column}} | +Footer {{column}} | +
|---|---|---|---|
| Header {{column}} | -{{column}} | -Footer {{column}} | -Header {{column}} | +{{column}} | +Footer {{column}} | +
|---|---|---|---|
| No. | First name | Middle name | Last name |
| {{person.id}} | -- {{person.firstName}} - - - - - | - -- {{person.middleName}} - - - - - | - -- {{person.lastName}} - - - - - | -
| {{person.id}} | + ++ {{person.firstName}} + + + + + | + ++ {{person.middleName}} + + + + + | + ++ {{person.lastName}} + + + + + | +
-
-
-
+
+
+
-
-
-
+
+
+ native input
[checked]="allToggler.checked | async"
[indeterminate]="allToggler.indeterminate | async"
(click)="allToggler.toggle($event)">
- mat-checkbox
Selected: {{selected2}}
-
-
- {{item}} -
+ @for (item of data; track item) {
+ -
+
+ {{item}} +
+ }
Single select with mat-checkbox
Selected: {{selected3}}
-
-
-
-
- {{item}} -
+ @for (item of data; track item) {
+ -
+
+ {{item}} +
+ }
with trackBy
Selected: {{selected4}}
-
-
- {{item}} -
+ @for (item of data; track trackByFn($index)) {
+ -
+
+ {{item}} +
+ }
- {{ item }}
-
- Click to {{ accordionItem.expanded ? 'close' : 'open' }}
-
-
-
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis
- excepturi incidunt ipsum deleniti labore, tempore non nam doloribus blanditiis
- veritatis illo autem iure aliquid ullam rem tenetur deserunt velit culpa?
-
-
+ {{ item }}
+
+ Click to {{ accordionItem.expanded ? 'close' : 'open' }}
+
+
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis
+ excepturi incidunt ipsum deleniti labore, tempore non nam doloribus blanditiis
+ veritatis illo autem iure aliquid ullam rem tenetur deserunt velit culpa?
+
+ Favorite Animal
My favorite animal is:- - ✓ Panda + @if (data.animal === 'panda') { + ✓ + } Panda
- - ✓ Unicorn + @if (data.animal === 'unicorn') { + ✓ + } Unicorn
- - ✓ Lion + @if (data.animal === 'lion') { + ✓ + } Lion
To do
[cdkDropListData]="todo" class="example-list" (cdkDropListDropped)="drop($event)"> -{{item}}
+ @for (item of todo; track item) {
+ {{item}}
+ }
@@ -19,7 +21,9 @@ Done
[cdkDropListData]="done" class="example-list" (cdkDropListDropped)="drop($event)"> -{{item}}
+ @for (item of done; track item) {
+ {{item}}
+ }
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
index 8b9396684dd6..cae54929724d 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {
CdkDragDrop,
CdkDrag,
@@ -17,7 +16,7 @@ import {
templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html',
styleUrls: ['cdk-drag-drop-connected-sorting-group-example.css'],
standalone: true,
- imports: [CdkDropListGroup, CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropListGroup, CdkDropList, CdkDrag],
})
export class CdkDragDropConnectedSortingGroupExample {
todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
index ed67f2935414..44cd97cf460e 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
@@ -8,7 +8,9 @@ To do
[cdkDropListConnectedTo]="[doneList]" class="example-list" (cdkDropListDropped)="drop($event)"> -{{item}}
+ @for (item of todo; track item) {
+ {{item}}
+ }
@@ -22,7 +24,9 @@ Done
[cdkDropListConnectedTo]="[todoList]" class="example-list" (cdkDropListDropped)="drop($event)"> -{{item}}
+ @for (item of done; track item) {
+ {{item}}
+ }
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
index 6287bb5c36a8..00055e1d5d17 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {
CdkDragDrop,
moveItemInArray,
@@ -16,7 +15,7 @@ import {
templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropList, CdkDrag],
})
export class CdkDragDropConnectedSortingExample {
todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html
index 68994b543234..f0673cd2abe7 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html
@@ -1,6 +1,8 @@
-
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
index 01d0ae213469..6ce72bc70a37 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
@@ -6,7 +6,6 @@ import {
CdkDropList,
moveItemInArray,
} from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
/**
* @title Drag&Drop custom placeholder
@@ -16,7 +15,7 @@ import {NgFor} from '@angular/common';
templateUrl: 'cdk-drag-drop-custom-placeholder-example.html',
styleUrls: ['cdk-drag-drop-custom-placeholder-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag, CdkDragPlaceholder],
+ imports: [CdkDropList, CdkDrag, CdkDragPlaceholder],
})
export class CdkDragDropCustomPlaceholderExample {
movies = [
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
index a6a717fb8746..5072331e4076 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
@@ -1,6 +1,8 @@
-
- {{movie}}
-
+ @for (movie of movies; track movie) {
+
+
+ {{movie}}
+
+ }
-
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
index 05c81f1514cd..de89682ba474 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {
CdkDragDrop,
CdkDropList,
@@ -16,7 +15,7 @@ import {
templateUrl: 'cdk-drag-drop-custom-preview-example.html',
styleUrls: ['cdk-drag-drop-custom-preview-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag, CdkDragPreview],
+ imports: [CdkDropList, CdkDrag, CdkDragPreview],
})
export class CdkDragDropCustomPreviewExample {
// tslint:disable:max-line-length
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html
index 1e9383b04beb..ee6b133d578b 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html
@@ -8,7 +8,9 @@
- {{movie.title}}
- ![]()
-
+ @for (movie of movies; track movie) {
+
+ {{movie.title}}
+ ![]()
+
+ }
Available items
class="example-list" cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)"> -{{item}}
+ @for (item of items; track item) {
+ {{item}}
+ }
@@ -20,7 +22,9 @@ Shopping basket
[cdkDropListData]="basket" class="example-list" (cdkDropListDropped)="drop($event)"> -{{item}}
+ @for (item of basket; track item) {
+ {{item}}
+ }
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
index 625e2dac3b88..5978eee1d5d0 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {
CdkDrag,
CdkDragDrop,
@@ -17,7 +16,7 @@ import {
templateUrl: 'cdk-drag-drop-disabled-sorting-example.html',
styleUrls: ['cdk-drag-drop-disabled-sorting-example.css'],
standalone: true,
- imports: [CdkDropListGroup, CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropListGroup, CdkDropList, CdkDrag],
})
export class CdkDragDropDisabledSortingExample {
items = ['Carrots', 'Tomatoes', 'Onions', 'Apples', 'Avocados'];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html
index d258da1b47de..75c0f30f1624 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html
@@ -1,7 +1,8 @@
-
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
index 95512519c67e..a9bc78fe7921 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
/**
* @title Drag&Drop disabled
@@ -10,7 +9,7 @@ import {NgFor} from '@angular/common';
templateUrl: 'cdk-drag-drop-disabled-example.html',
styleUrls: ['cdk-drag-drop-disabled-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropList, CdkDrag],
})
export class CdkDragDropDisabledExample {
items = [
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html
index d8d02e342bb9..258fb3c5d8ce 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html
@@ -9,11 +9,12 @@ {{item.value}}
+ @for (item of items; track item) {
+ {{item.value}}
+ }
Available numbers
class="example-list" (cdkDropListDropped)="drop($event)" [cdkDropListEnterPredicate]="noReturnPredicate"> -{{number}}
+ @for (number of all; track number) {
+ {{number}}
+ }
@@ -28,11 +29,12 @@ Even numbers
class="example-list" (cdkDropListDropped)="drop($event)" [cdkDropListEnterPredicate]="evenPredicate"> -{{number}}
+ @for (number of even; track number) {
+ {{number}}
+ }
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
index 0f761795970a..2db8c906b9a2 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {
CdkDragDrop,
moveItemInArray,
@@ -16,7 +15,7 @@ import {
templateUrl: 'cdk-drag-drop-enter-predicate-example.html',
styleUrls: ['cdk-drag-drop-enter-predicate-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropList, CdkDrag],
})
export class CdkDragDropEnterPredicateExample {
all = [1, 2, 3, 4, 5, 6, 7, 8, 9];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
index d32505ba1a15..f476de2fa1a2 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
@@ -1,3 +1,5 @@
-
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
index 3eb91457a54d..2b6193cba1bf 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
/**
@@ -10,7 +9,7 @@ import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/d
templateUrl: 'cdk-drag-drop-horizontal-sorting-example.html',
styleUrls: ['cdk-drag-drop-horizontal-sorting-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropList, CdkDrag],
})
export class CdkDragDropHorizontalSortingExample {
timePeriods = [
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html
index 34c2d6711dc7..1e97c0c37e49 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html
@@ -3,9 +3,10 @@
class="example-list"
(cdkDropListDropped)="drop($event)"
[cdkDropListSortPredicate]="sortPredicate">
- {{timePeriod}}
+ @for (timePeriod of timePeriods; track timePeriod) {
+ {{timePeriod}}
+ }
{{number}}
+ @for (number of numbers; track number) {
+ {{number}}
+ }
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
index 8fa2a25d9692..86f8f2a8edd0 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';
/**
@@ -10,7 +9,7 @@ import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/d
templateUrl: 'cdk-drag-drop-sort-predicate-example.html',
styleUrls: ['cdk-drag-drop-sort-predicate-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropList, CdkDrag],
})
export class CdkDragDropSortPredicateExample {
numbers = [1, 2, 3, 4, 5, 6, 7, 8];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
index 699c95cf9c7b..d240babbfc3d 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
@@ -1,3 +1,5 @@
-
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
index 35a8e31a51d7..5674fc049ad4 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
/**
* @title Drag&Drop sorting
@@ -10,7 +9,7 @@ import {NgFor} from '@angular/common';
templateUrl: 'cdk-drag-drop-sorting-example.html',
styleUrls: ['cdk-drag-drop-sorting-example.css'],
standalone: true,
- imports: [CdkDropList, NgFor, CdkDrag],
+ imports: [CdkDropList, CdkDrag],
})
export class CdkDragDropSortingExample {
movies = [
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html
index 26cd1eba7ed9..1cecc7c5f695 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html
@@ -8,11 +8,9 @@
cdkListboxUseActiveDescendant
aria-labelledby="example-spatula-label"
class="example-listbox">
- {{movie}}
+ @for (movie of movies; track movie) {
+ {{movie}}
+ }
- Your appointment is scheduled for {{formatAppointment() | json}} -
+@if (appointment[0]) { ++ Your appointment is scheduled for {{formatAppointment() | json}} +
+} diff --git a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts index 9a1e2103c828..fc79ef4ac178 100644 --- a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts +++ b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {NgFor, NgIf, JsonPipe} from '@angular/common'; +import {JsonPipe} from '@angular/common'; import {CdkListbox, CdkOption} from '@angular/cdk/listbox'; const today = new Date(); @@ -19,7 +19,7 @@ const formatter = new Intl.DateTimeFormat(undefined, { templateUrl: 'cdk-listbox-compare-with-example.html', styleUrls: ['cdk-listbox-compare-with-example.css'], standalone: true, - imports: [CdkListbox, NgFor, CdkOption, NgIf, JsonPipe], + imports: [CdkListbox, CdkOption, JsonPipe], }) export class CdkListboxCompareWithExample { slots = [12, 13, 14, 15].map( diff --git a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html index 5cc648351875..391e26f1a7b2 100644 --- a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html +++ b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html @@ -6,16 +6,18 @@ [formControl]="signCtrl" aria-labelledby="example-zodiac-sign-label" class="example-listbox"> -
-
+@if (invalid | async) {
+ {{error}}
-
+ @for (error of getErrors(); track error) {
+
+}
{{error}}
+ } +Your zodiac sign is: {{signCtrl.value | json}} diff --git a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts index ff6e9c215d57..a8ca73893fb4 100644 --- a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts +++ b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {map} from 'rxjs/operators'; import {Observable} from 'rxjs'; -import {NgFor, NgIf, AsyncPipe, JsonPipe} from '@angular/common'; +import {AsyncPipe, JsonPipe} from '@angular/common'; import {CdkListbox, CdkOption} from '@angular/cdk/listbox'; /** @title Listbox with forms validation. */ @@ -12,16 +12,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox'; templateUrl: 'cdk-listbox-forms-validation-example.html', styleUrls: ['cdk-listbox-forms-validation-example.css'], standalone: true, - imports: [ - CdkListbox, - FormsModule, - ReactiveFormsModule, - NgFor, - CdkOption, - NgIf, - AsyncPipe, - JsonPipe, - ], + imports: [CdkListbox, FormsModule, ReactiveFormsModule, CdkOption, AsyncPipe, JsonPipe], }) export class CdkListboxFormsValidationExample { signs = [ diff --git a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html index 08b362fb333b..5b5e6f19b386 100644 --- a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html +++ b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html @@ -6,10 +6,8 @@ cdkListboxOrientation="horizontal" aria-labelledby="example-shirt-size-label" class="example-listbox"> -
-
+ @for (size of sizes; track size) {
+
+ }
diff --git a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts index e68e5a7baec7..c9ae902bffa7 100644 --- a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts +++ b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts @@ -1,5 +1,4 @@ import {Component} from '@angular/core'; -import {NgFor} from '@angular/common'; import { CdkMenu, CdkMenuItem, @@ -20,7 +19,6 @@ import { CdkMenu, CdkMenuItemCheckbox, CdkMenuGroup, - NgFor, CdkMenuItemRadio, CdkMenuItem, ], diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html index 0020c02846a5..016b70b3c70d 100644 --- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html +++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html @@ -1,9 +1,11 @@ -
Content before
{{item}}
Please open on StackBlitz to see result
+@if (!shouldRun) {
+ Please open on StackBlitz to see result
+}
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
index 85ea301d4074..8b8de163953a 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
@@ -1,5 +1,4 @@
import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {NgIf} from '@angular/common';
import {ScrollingModule} from '@angular/cdk/scrolling';
/** @title Virtual scrolling window */
@@ -9,7 +8,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
templateUrl: 'cdk-virtual-scroll-window-scrolling-example.html',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
- imports: [NgIf, ScrollingModule],
+ imports: [ScrollingModule],
})
export class CdkVirtualScrollWindowScrollingExample {
@Input() shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
diff --git a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
index d21e092b0381..19d1fb595847 100644
--- a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
+++ b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
@@ -1,6 +1,6 @@
import {Component, forwardRef} from '@angular/core';
import {CdkStepper, CdkStepperModule} from '@angular/cdk/stepper';
-import {NgTemplateOutlet, NgFor} from '@angular/common';
+import {NgTemplateOutlet} from '@angular/common';
/** @title A custom CDK stepper without a form */
@Component({
@@ -19,7 +19,7 @@ export class CdkCustomStepperWithoutFormExample {}
styleUrls: ['./example-custom-stepper.css'],
providers: [{provide: CdkStepper, useExisting: CustomStepper}],
standalone: true,
- imports: [NgTemplateOutlet, CdkStepperModule, NgFor],
+ imports: [NgTemplateOutlet, CdkStepperModule],
})
export class CustomStepper extends CdkStepper {
selectStepByIndex(index: number): void {
diff --git a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html
index f3cb23972f5d..625c72b8bf92 100644
--- a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html
+++ b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html
@@ -7,14 +7,12 @@ Step {{ selectedIndex + 1 }}/{{ steps.length }}
diff --git a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts index 6b422e4a414a..16a8f9a20d04 100644 --- a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts +++ b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts @@ -1,7 +1,7 @@ import {Component, forwardRef} from '@angular/core'; import {CdkStepper, CdkStepperModule} from '@angular/cdk/stepper'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {NgTemplateOutlet, NgFor} from '@angular/common'; +import {NgTemplateOutlet} from '@angular/common'; /** @title A custom CDK linear stepper with forms */ @Component({ @@ -39,7 +39,7 @@ export class CdkLinearStepperWithFormExample { styleUrls: ['./example-custom-linear-stepper.css'], providers: [{provide: CdkStepper, useExisting: CustomLinearStepper}], standalone: true, - imports: [NgTemplateOutlet, CdkStepperModule, NgFor], + imports: [NgTemplateOutlet, CdkStepperModule], }) export class CustomLinearStepper extends CdkStepper { selectStepByIndex(index: number): void { diff --git a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html index ec97b13bf0f4..70bc88308cc0 100644 --- a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html +++ b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html @@ -7,14 +7,12 @@Step {{selectedIndex + 1}}/{{steps.length}}
diff --git a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html index 9942f27a0852..1d2b160fe1ff 100644 --- a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html +++ b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html @@ -2,12 +2,16 @@Name
-Name
[ngModel]="[element.type]" (selectionChange)="f.ngSubmit.emit()" aria-label="Element type"> -Name
diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
index a3aaafd0b58e..1e051a32a336 100644
--- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
+++ b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
@@ -5,7 +5,6 @@ import {NgForm, FormsModule} from '@angular/forms';
import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
import {BehaviorSubject, Observable} from 'rxjs';
import {MatListModule} from '@angular/material/list';
-import {NgIf, NgFor} from '@angular/common';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
@@ -218,9 +217,7 @@ const FANTASY_ELEMENTS: readonly FantasyElement[] = [
MatButtonModule,
MatIconModule,
MatCheckboxModule,
- NgIf,
MatListModule,
- NgFor,
MatSnackBarModule,
],
})
diff --git a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html
index bec0b35b1cc5..5c7a9b02ea85 100644
--- a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html
+++ b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html
@@ -5,40 +5,48 @@
[checked]="allToggler.checked | async"
[indeterminate]="allToggler.indeterminate | async"
(click)="allToggler.toggle($event)">
-
-
- {{item}}
-
+ @for (item of data; track item) {
+
+
+ {{item}}
+
+ }
Selected: {{selected2}}
Selected: {{selected3}}
Selected: {{selected4}}
-
- {{option}}
-
+ @for (option of filteredOptions | async; track option) {
+ {{option}}
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
index a8093b37e76f..8f18898d8903 100644
--- a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -21,7 +21,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
MatInputModule,
MatAutocompleteModule,
ReactiveFormsModule,
- NgFor,
AsyncPipe,
],
})
diff --git a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html
index 455d42ef963b..479304681f7a 100644
--- a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html
@@ -3,9 +3,9 @@
Assignee
-
- {{option.name}}
-
+ @for (option of filteredOptions | async; track option) {
+ {{option.name}}
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
index 5fc1a62c84fe..40394477d82e 100644
--- a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -25,7 +25,6 @@ export interface User {
MatInputModule,
MatAutocompleteModule,
ReactiveFormsModule,
- NgFor,
AsyncPipe,
],
})
diff --git a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html
index 1562b3c8387b..8ac756c675af 100644
--- a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html
@@ -8,9 +8,9 @@
[formControl]="myControl"
[matAutocomplete]="auto">
-
- {{option}}
-
+ @for (option of filteredOptions | async; track option) {
+ {{option}}
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
index 20088741e197..17d9d844e5bf 100644
--- a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -21,7 +21,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
MatInputModule,
MatAutocompleteModule,
ReactiveFormsModule,
- NgFor,
AsyncPipe,
],
})
diff --git a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html
index 9ec82cd88899..e0af7691b679 100644
--- a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html
@@ -1,5 +1,7 @@
- {{ state.name }}
+ @for (state of states; track state) {
+ {{ state.name }}
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts
index d3848a54d31b..2dac7916eb30 100644
--- a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
/**
@@ -9,7 +8,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
selector: 'autocomplete-harness-example',
templateUrl: 'autocomplete-harness-example.html',
standalone: true,
- imports: [MatAutocompleteModule, NgFor],
+ imports: [MatAutocompleteModule],
})
export class AutocompleteHarnessExample {
states = [
diff --git a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html
index 8e0ccdea8130..8181071dec7a 100644
--- a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html
@@ -8,11 +8,13 @@
[matAutocomplete]="autoGroup">
-
-
- {{name}}
-
-
+ @for (group of stateGroupOptions | async; track group) {
+
+ @for (name of group.names; track name) {
+ {{name}}
+ }
+
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts
index 055013753108..f413f5755fae 100644
--- a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -31,7 +31,6 @@ export const _filter = (opt: string[], value: string): string[] => {
MatFormFieldModule,
MatInputModule,
MatAutocompleteModule,
- NgFor,
AsyncPipe,
],
})
diff --git a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html
index 9a828b98a80f..51c22a153544 100644
--- a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html
@@ -6,11 +6,13 @@
[matAutocomplete]="auto"
[formControl]="stateCtrl">
-
- ![]()
- {{state.name}} |
- Population: {{state.population}}
-
+ @for (state of filteredStates | async; track state) {
+
+ ![]()
+ {{state.name}} |
+ Population: {{state.population}}
+
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
index e8fefe1dd766..a2ef5ca19243 100644
--- a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
@@ -3,7 +3,7 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -28,7 +28,6 @@ export interface State {
MatInputModule,
MatAutocompleteModule,
ReactiveFormsModule,
- NgFor,
MatSlideToggleModule,
AsyncPipe,
],
diff --git a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html
index 1f94451ba956..d830477d23ca 100644
--- a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html
@@ -5,8 +5,8 @@
[matAutocomplete]="auto"
class="example-input">
-
- {{street}}
-
+ @for (street of filteredStreets | async; track street) {
+ {{street}}
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
index 5e043b281bc4..168a3b18204c 100644
--- a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
/**
@@ -13,7 +13,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
templateUrl: 'autocomplete-plain-input-example.html',
styleUrls: ['autocomplete-plain-input-example.css'],
standalone: true,
- imports: [FormsModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, AsyncPipe],
+ imports: [FormsModule, MatAutocompleteModule, ReactiveFormsModule, AsyncPipe],
})
export class AutocompletePlainInputExample implements OnInit {
control = new FormControl('');
diff --git a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html
index e5c96b37e9d3..e219ae709ab9 100644
--- a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html
@@ -12,9 +12,9 @@
(input)="filter()"
(focus)="filter()">
-
- {{option}}
-
+ @for (option of filteredOptions; track option) {
+ {{option}}
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
index 5da4fc881088..42d322fbfd70 100644
--- a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
@@ -1,6 +1,6 @@
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -19,7 +19,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
MatInputModule,
MatAutocompleteModule,
ReactiveFormsModule,
- NgFor,
AsyncPipe,
],
})
diff --git a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html
index a8332e050ee1..c3a57bceb82d 100644
--- a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html
@@ -11,9 +11,9 @@
-
- {{option}}
-
+ @for (option of options; track option) {
+ {{option}}
+ }
diff --git a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
index 18ee25c3dde5..1cd58ba7ceef 100644
--- a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -19,7 +18,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
MatInputModule,
MatAutocompleteModule,
ReactiveFormsModule,
- NgFor,
],
})
export class AutocompleteSimpleExample {
diff --git a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
index 89f364c1fea8..ff06d1f31192 100644
--- a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
+++ b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
@@ -15,13 +15,15 @@
Favorite Fruits
-
- {{fruit}}
-
-
+ @for (fruit of fruits; track fruit) {
+
+ {{fruit}}
+
+
+ }
-
- {{fruit}}
-
+ @for (fruit of filteredFruits | async; track fruit) {
+ {{fruit}}
+ }
diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
index 9b6a27fad8bb..71b023377968 100644
--- a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
+++ b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
@@ -6,7 +6,7 @@ import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {MatIconModule} from '@angular/material/icon';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
import {MatFormFieldModule} from '@angular/material/form-field';
import {LiveAnnouncer} from '@angular/cdk/a11y';
@@ -22,7 +22,6 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
FormsModule,
MatFormFieldModule,
MatChipsModule,
- NgFor,
MatIconModule,
MatAutocompleteModule,
ReactiveFormsModule,
diff --git a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html
index b695a45e3d31..774899b66afc 100644
--- a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html
+++ b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html
@@ -1,12 +1,9 @@
-
- {{vegetable.name}}
-
+ @for (vegetable of vegetables; track vegetable) {
+ {{vegetable.name}}
+ }
diff --git a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
index 1c5d60a490d0..130f643518cb 100644
--- a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
+++ b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
import {MatChipsModule} from '@angular/material/chips';
export interface Vegetable {
@@ -15,7 +14,7 @@ export interface Vegetable {
templateUrl: 'chips-drag-drop-example.html',
styleUrls: ['chips-drag-drop-example.css'],
standalone: true,
- imports: [MatChipsModule, CdkDropList, NgFor, CdkDrag],
+ imports: [MatChipsModule, CdkDropList, CdkDrag],
})
export class ChipsDragDropExample {
vegetables: Vegetable[] = [
diff --git a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html
index 72631a4b7cd7..d1dfeddd6c2c 100644
--- a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html
+++ b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html
@@ -8,12 +8,14 @@
Video keywords
-
- {{keyword}}
-
-
+ @for (keyword of keywords; track keyword) {
+
+ {{keyword}}
+
+
+ }
Favorite Fruits
-
- {{fruit.name}}
-
-
+ @for (fruit of fruits; track fruit) {
+
+ {{fruit.name}}
+
+
+ }
-
- {{chip.name}}
-
-
\ No newline at end of file
+ @for (chip of availableColors; track chip) {
+ {{chip.name}}
+ }
+
diff --git a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
index 798e825d2c5f..0dde8fe84408 100644
--- a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
+++ b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
-import {NgFor} from '@angular/common';
import {MatChipsModule} from '@angular/material/chips';
export interface ChipColor {
@@ -16,7 +15,7 @@ export interface ChipColor {
templateUrl: 'chips-stacked-example.html',
styleUrls: ['chips-stacked-example.css'],
standalone: true,
- imports: [MatChipsModule, NgFor],
+ imports: [MatChipsModule],
})
export class ChipsStackedExample {
availableColors: ChipColor[] = [
diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
index 34b60d753dee..7d218f08c524 100644
--- a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
+++ b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
@@ -8,8 +8,12 @@
Invalid start date
- Invalid end date
+ @if (range.controls.start.hasError('matStartDateInvalid')) {
+ Invalid start date
+ }
+ @if (range.controls.end.hasError('matEndDateInvalid')) {
+ Invalid end date
+ }
diff --git a/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts b/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts
index 54a160dc3dea..4b604892a7b2 100644
--- a/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts
+++ b/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts
@@ -1,6 +1,5 @@
import {Component, Inject} from '@angular/core';
import {MatDialog, MAT_DIALOG_DATA, MatDialogModule} from '@angular/material/dialog';
-import {NgIf} from '@angular/common';
import {MatButtonModule} from '@angular/material/button';
export interface DialogData {
@@ -32,7 +31,7 @@ export class DialogDataExample {
selector: 'dialog-data-example-dialog',
templateUrl: 'dialog-data-example-dialog.html',
standalone: true,
- imports: [MatDialogModule, NgIf],
+ imports: [MatDialogModule],
})
export class DialogDataExampleDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html
index 5e7be5d347ca..c3f033499dad 100644
--- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html
+++ b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html
@@ -8,7 +8,7 @@
native input
[checked]="allToggler.checked | async"
[indeterminate]="allToggler.indeterminate | async"
(click)="allToggler.toggle($event)">
- mat-checkbox
Selected: {{selected2}}
- + @for (item of data; track item) { +
-
{{item}}
+}
Single select with mat-checkbox
Selected: {{selected3}}
-
-
-
-
- {{item}} -
+ @for (item of data; track item) {
+ -
+
+ {{item}} +
+ }
with trackBy
Selected: {{selected4}}
-
-
- {{item}} -
+ @for (item of data; track trackByFn(i, item); let i = $index) {
+ -
+
+ {{item}} +
+ }
-
-
-
-
- {{subtask.name}} - -
+ @for (subtask of task.subtasks; track subtask) {
+ -
+
+ {{subtask.name}} + +
+ }
Selected range: {{range.value | json}}
diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts index 2074169d3cfa..b1b4d92a3460 100644 --- a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts +++ b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {FormGroup, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {NgIf, JsonPipe} from '@angular/common'; +import {JsonPipe} from '@angular/common'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatNativeDateModule} from '@angular/material/core'; @@ -15,7 +15,6 @@ import {MatNativeDateModule} from '@angular/material/core'; MatDatepickerModule, FormsModule, ReactiveFormsModule, - NgIf, JsonPipe, MatNativeDateModule, ], diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html index 208548d84935..1dc59fb2450d 100644 --- a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html +++ b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html @@ -8,5 +8,7 @@
-
diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
index 55c8a89fe8f3..beed6b8c22ad 100644
--- a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {MatDatepickerInputEvent, MatDatepickerModule} from '@angular/material/datepicker';
-import {NgFor} from '@angular/common';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatNativeDateModule} from '@angular/material/core';
@@ -11,7 +10,7 @@ import {MatNativeDateModule} from '@angular/material/core';
templateUrl: 'datepicker-events-example.html',
styleUrls: ['datepicker-events-example.css'],
standalone: true,
- imports: [MatFormFieldModule, MatInputModule, MatNativeDateModule, MatDatepickerModule, NgFor],
+ imports: [MatFormFieldModule, MatInputModule, MatNativeDateModule, MatDatepickerModule],
})
export class DatepickerEventsExample {
events: string[] = [];
diff --git a/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html b/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html
index 6d263bacf3c9..25b007c49e65 100644
--- a/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html
+++ b/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html
@@ -3,13 +3,19 @@ {{e}}
+ @for (e of events; track e) {
+ {{e}}
+ }
Favorite Animal
My favorite animal is:- - ✓ Panda + @if (data.animal === 'panda') { + ✓ + } Panda
- - ✓ Unicorn + @if (data.animal === 'unicorn') { + ✓ + } Unicorn
- - ✓ Lion + @if (data.animal === 'lion') { + ✓ + } Lion
Folders
- {{folder.name}}
- {{folder.updated | date}}
- {{folder.name}}
+ {{folder.updated | date}}
+ Notes
- {{note.name}}
- {{note.updated | date}}
- {{note.name}}
+ {{note.updated | date}}
+
diff --git a/src/components-examples/material/list/list-selection/list-selection-example.ts b/src/components-examples/material/list/list-selection/list-selection-example.ts
index 2d5c04ecb1a5..2209654a7771 100644
--- a/src/components-examples/material/list/list-selection/list-selection-example.ts
+++ b/src/components-examples/material/list/list-selection/list-selection-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {MatListModule} from '@angular/material/list';
/**
@@ -9,7 +8,7 @@ import {MatListModule} from '@angular/material/list';
selector: 'list-selection-example',
templateUrl: 'list-selection-example.html',
standalone: true,
- imports: [MatListModule, NgFor],
+ imports: [MatListModule],
})
export class ListSelectionExample {
typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html b/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
index c08d6106d477..0c653bd3b6da 100644
--- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
+++ b/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
@@ -1,7 +1,7 @@
diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts b/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts index c9a06a75e45c..c848f921fe8c 100644 --- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts +++ b/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts @@ -1,5 +1,4 @@ import {Component} from '@angular/core'; -import {NgFor} from '@angular/common'; import {MatListModule} from '@angular/material/list'; /** @@ -9,7 +8,7 @@ import {MatListModule} from '@angular/material/list'; selector: 'list-single-selection-example', templateUrl: 'list-single-selection-example.html', standalone: true, - imports: [MatListModule, NgFor], + imports: [MatListModule], }) export class ListSingleSelectionExample { typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; diff --git a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html index 1e658b2cced3..100f7afff8fc 100644 --- a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html +++ b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html @@ -35,18 +35,22 @@
Progress bar configuration
-Progress spinner configuration
-Your favorite season is: {{favoriteSeason}}
diff --git a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
index c2ecf4d85d95..6af67740ee0f 100644
--- a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
+++ b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {MatRadioModule} from '@angular/material/radio';
@@ -11,7 +10,7 @@ import {MatRadioModule} from '@angular/material/radio';
templateUrl: 'radio-ng-model-example.html',
styleUrls: ['radio-ng-model-example.css'],
standalone: true,
- imports: [MatRadioModule, FormsModule, NgFor],
+ imports: [MatRadioModule, FormsModule],
})
export class RadioNgModelExample {
favoriteSeason: string;
diff --git a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
index e768a8908899..522a6b329b9a 100644
--- a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
+++ b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
@@ -3,10 +3,14 @@
mat-select
native html select
@@ -21,8 +23,10 @@native html select
-mat-select
Selected food: {{selectedValue}}
@@ -14,9 +14,9 @@native html select
Selected car: {{selectedCar}}
diff --git a/src/components-examples/material/select/select-form/select-form-example.ts b/src/components-examples/material/select/select-form/select-form-example.ts index 5e87a68ea320..e06de0971da4 100644 --- a/src/components-examples/material/select/select-form/select-form-example.ts +++ b/src/components-examples/material/select/select-form/select-form-example.ts @@ -1,6 +1,5 @@ import {Component} from '@angular/core'; import {MatInputModule} from '@angular/material/input'; -import {NgFor} from '@angular/common'; import {MatSelectModule} from '@angular/material/select'; import {MatFormFieldModule} from '@angular/material/form-field'; import {FormsModule} from '@angular/forms'; @@ -22,7 +21,7 @@ interface Car { selector: 'select-form-example', templateUrl: 'select-form-example.html', standalone: true, - imports: [FormsModule, MatFormFieldModule, MatSelectModule, NgFor, MatInputModule], + imports: [FormsModule, MatFormFieldModule, MatSelectModule, MatInputModule], }) export class SelectFormExample { selectedValue: string; diff --git a/src/components-examples/material/select/select-harness/select-harness-example.html b/src/components-examples/material/select/select-harness/select-harness-example.html index e41f610c08d1..687e19334a62 100644 --- a/src/components-examples/material/select/select-harness/select-harness-example.html +++ b/src/components-examples/material/select/select-harness/select-harness-example.html @@ -1,8 +1,8 @@mat select
native html select
-Basic mat-select with initial value
You selected: {{selectedFood}}
@@ -13,8 +15,10 @@Basic native select with initial value
You selected: {{selectedCar}}
diff --git a/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts b/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts index 0688b7f3539f..dfa6782a0eef 100644 --- a/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts +++ b/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts @@ -1,7 +1,6 @@ import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatInputModule} from '@angular/material/input'; -import {NgFor} from '@angular/common'; import {MatSelectModule} from '@angular/material/select'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -22,7 +21,7 @@ interface Car { selector: 'select-initial-value-example', templateUrl: 'select-initial-value-example.html', standalone: true, - imports: [MatFormFieldModule, MatSelectModule, NgFor, MatInputModule, FormsModule], + imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule], }) export class SelectInitialValueExample { foods: Food[] = [ diff --git a/src/components-examples/material/select/select-multiple/select-multiple-example.html b/src/components-examples/material/select/select-multiple/select-multiple-example.html index 2f617c7221fc..1387a62bd98c 100644 --- a/src/components-examples/material/select/select-multiple/select-multiple-example.html +++ b/src/components-examples/material/select/select-multiple/select-multiple-example.html @@ -1,6 +1,8 @@mat-select
Basic mat-select
mat-select
Selected: {{foodControl.value}}
@@ -15,9 +15,9 @@Native select
Selected: {{carControl.value}}
diff --git a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts b/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts index 816341b06dff..67f07d8003ba 100644 --- a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts +++ b/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts @@ -1,7 +1,6 @@ import {Component} from '@angular/core'; import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatInputModule} from '@angular/material/input'; -import {NgFor} from '@angular/common'; import {MatSelectModule} from '@angular/material/select'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -22,14 +21,7 @@ interface Car { selector: 'select-reactive-form-example', templateUrl: 'select-reactive-form-example.html', standalone: true, - imports: [ - FormsModule, - ReactiveFormsModule, - MatFormFieldModule, - MatSelectModule, - NgFor, - MatInputModule, - ], + imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatInputModule], }) export class SelectReactiveFormExample { foods: Food[] = [ diff --git a/src/components-examples/material/select/select-reset/select-reset-example.html b/src/components-examples/material/select/select-reset/select-reset-example.html index e0f734507aab..0b89556937b1 100644 --- a/src/components-examples/material/select/select-reset/select-reset-example.html +++ b/src/components-examples/material/select/select-reset/select-reset-example.html @@ -3,7 +3,9 @@mat-select
Auto-resizing sidenav
-Lorem, ipsum dolor sit amet consectetur.
+ @if (showFiller) { +Lorem, ipsum dolor sit amet consectetur.
+ } diff --git a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts index 8d7cc2a368a0..d6eea4d561e3 100644 --- a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts +++ b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts @@ -1,6 +1,5 @@ import {Component} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; -import {NgIf} from '@angular/common'; import {MatSidenavModule} from '@angular/material/sidenav'; /** @@ -11,7 +10,7 @@ import {MatSidenavModule} from '@angular/material/sidenav'; templateUrl: 'sidenav-autosize-example.html', styleUrls: ['sidenav-autosize-example.css'], standalone: true, - imports: [MatSidenavModule, NgIf, MatButtonModule], + imports: [MatSidenavModule, MatButtonModule], }) export class SidenavAutosizeExample { showFiller = false; diff --git a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html index e9542d34307c..e6b0821ca811 100644 --- a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html +++ b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html @@ -1,36 +1,39 @@ -- -
-+ +
+
-
- -
-
+
+ +
+Please open on Stackblitz to see result
+}
-Please open on Stackblitz to see result
diff --git a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
index f397fcd2d04d..b8361413683c 100644
--- a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgIf} from '@angular/common';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatDrawerMode, MatSidenavModule} from '@angular/material/sidenav';
import {MatRadioModule} from '@angular/material/radio';
@@ -12,14 +11,7 @@ import {ConfigurableFocusTrapFactory, FocusTrapFactory} from '@angular/cdk/a11y'
templateUrl: 'sidenav-configurable-focus-trap-example.html',
styleUrls: ['sidenav-configurable-focus-trap-example.css'],
standalone: true,
- imports: [
- NgIf,
- MatSidenavModule,
- MatButtonModule,
- MatRadioModule,
- FormsModule,
- ReactiveFormsModule,
- ],
+ imports: [MatSidenavModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
providers: [{provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory}],
})
export class SidenavConfigurableFocusTrapExample {
diff --git a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html
index 4d861c83410c..fada970cd015 100644
--- a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html
+++ b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html
@@ -1,13 +1,15 @@
-Closed due to: {{reason}}
-Please open on Stackblitz to see result
+ Closed due to: {{reason}}
+Please open on Stackblitz to see result
+}
diff --git a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
index 67361e126f2e..7f21079abbae 100644
--- a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
@@ -1,7 +1,6 @@
import {Component, ViewChild} from '@angular/core';
import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
import {MatButtonModule} from '@angular/material/button';
-import {NgIf} from '@angular/common';
/** @title Sidenav with custom escape and backdrop click behavior */
@Component({
@@ -9,7 +8,7 @@ import {NgIf} from '@angular/common';
templateUrl: 'sidenav-disable-close-example.html',
styleUrls: ['sidenav-disable-close-example.css'],
standalone: true,
- imports: [NgIf, MatSidenavModule, MatButtonModule],
+ imports: [MatSidenavModule, MatButtonModule],
})
export class SidenavDisableCloseExample {
@ViewChild('sidenav') sidenav: MatSidenav;
diff --git a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html
index d43ed7fe251a..9880c28eddb1 100644
--- a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html
+++ b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html
@@ -1,4 +1,4 @@
-Please open on StackBlitz to see result
+} @else {
+ Please open on StackBlitz to see result
+}
diff --git a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
index 893e2080ed17..3ad9ff1e2db2 100644
--- a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
@@ -6,7 +6,6 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatInputModule} from '@angular/material/input';
-import {NgIf} from '@angular/common';
/** @title Fixed sidenav */
@Component({
@@ -15,7 +14,6 @@ import {NgIf} from '@angular/common';
styleUrls: ['sidenav-fixed-example.css'],
standalone: true,
imports: [
- NgIf,
MatToolbarModule,
MatSidenavModule,
FormsModule,
diff --git a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html
index d26f9dee6fb5..04f8b534ac73 100644
--- a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html
+++ b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html
@@ -1,27 +1,30 @@
-
-
+
-
+
Please open on Stackblitz to see result
+}
-Please open on Stackblitz to see result
diff --git a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
index 55412ee2d2df..cd02ec9c7aa2 100644
--- a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
@@ -1,5 +1,4 @@
import {Component} from '@angular/core';
-import {NgIf} from '@angular/common';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatDrawerMode, MatSidenavModule} from '@angular/material/sidenav';
import {MatRadioModule} from '@angular/material/radio';
@@ -11,14 +10,7 @@ import {MatButtonModule} from '@angular/material/button';
templateUrl: 'sidenav-mode-example.html',
styleUrls: ['sidenav-mode-example.css'],
standalone: true,
- imports: [
- NgIf,
- MatSidenavModule,
- MatButtonModule,
- MatRadioModule,
- FormsModule,
- ReactiveFormsModule,
- ],
+ imports: [MatSidenavModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
})
export class SidenavModeExample {
mode = new FormControl('over' as MatDrawerMode);
diff --git a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html
index 82cf9382b03c..f82321e94337 100644
--- a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html
+++ b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html
@@ -1,17 +1,22 @@
-Events:
-
-
- {{e}}
- Events:
+
+ @for (e of events; track e) {
+
+ {{e}}
+ }
+ Please open on Stackblitz to see result
+}
-Please open on Stackblitz to see result
diff --git a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
index b7c095783a7f..c49a7a5521bf 100644
--- a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
@@ -3,7 +3,6 @@ import {MatButtonModule} from '@angular/material/button';
import {FormsModule} from '@angular/forms';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSidenavModule} from '@angular/material/sidenav';
-import {NgIf, NgFor} from '@angular/common';
/** @title Sidenav open & close behavior */
@Component({
@@ -11,7 +10,7 @@ import {NgIf, NgFor} from '@angular/common';
templateUrl: 'sidenav-open-close-example.html',
styleUrls: ['sidenav-open-close-example.css'],
standalone: true,
- imports: [NgIf, MatSidenavModule, MatCheckboxModule, FormsModule, MatButtonModule, NgFor],
+ imports: [MatSidenavModule, MatCheckboxModule, FormsModule, MatButtonModule],
})
export class SidenavOpenCloseExample {
events: string[] = [];
diff --git a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html
index bb50d519621e..acbdbe728516 100644
--- a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html
+++ b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html
@@ -1,6 +1,8 @@
-Please open on Stackblitz to see result
+@if (shouldRun) {
+ Please open on Stackblitz to see result
+}
diff --git a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
index 76bd2bd42a80..b9ee6ac6ac98 100644
--- a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {MatSidenavModule} from '@angular/material/sidenav';
-import {NgIf} from '@angular/common';
/** @title Basic sidenav */
@Component({
@@ -8,7 +7,7 @@ import {NgIf} from '@angular/common';
templateUrl: 'sidenav-overview-example.html',
styleUrls: ['sidenav-overview-example.css'],
standalone: true,
- imports: [NgIf, MatSidenavModule],
+ imports: [MatSidenavModule],
})
export class SidenavOverviewExample {
shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
diff --git a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html
index d45f0e8cb0a1..3319e1452401 100644
--- a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html
+++ b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html
@@ -1,7 +1,9 @@
-Please open on Stackblitz to see result
+@if (shouldRun) {
+ Please open on Stackblitz to see result
+}
diff --git a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
index 3169bcaf54d0..250d7611486b 100644
--- a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
@@ -1,6 +1,5 @@
import {Component} from '@angular/core';
import {MatSidenavModule} from '@angular/material/sidenav';
-import {NgIf} from '@angular/common';
/** @title Implicit main content with two sidenavs */
@Component({
@@ -8,7 +7,7 @@ import {NgIf} from '@angular/common';
templateUrl: 'sidenav-position-example.html',
styleUrls: ['sidenav-position-example.css'],
standalone: true,
- imports: [NgIf, MatSidenavModule],
+ imports: [MatSidenavModule],
})
export class SidenavPositionExample {
shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
index b12947dfd237..7a51a65fc95f 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
+++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
@@ -1,22 +1,28 @@
-
-
-
-
+@if (shouldRun) {
+
+ @for (content of fillerContent; track content) {
+
+
+
+} @else {
+ Responsive App
-
+
+
+
-
-
-
- {{nav}}
-
-
+
+
+
+ @for (nav of fillerNav; track nav) {
+ {{nav}}
+ }
+
+
-
-
-
-
-
-Responsive App
+{{content}}
-Please open on Stackblitz to see result
+ {{content}}
+ } +Please open on Stackblitz to see result
+}
diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
index d5953f61b831..89287e19af34 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
@@ -5,7 +5,6 @@ import {MatSidenavModule} from '@angular/material/sidenav';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import {MatToolbarModule} from '@angular/material/toolbar';
-import {NgIf, NgFor} from '@angular/common';
/** @title Responsive sidenav */
@Component({
@@ -13,15 +12,7 @@ import {NgIf, NgFor} from '@angular/common';
templateUrl: 'sidenav-responsive-example.html',
styleUrls: ['sidenav-responsive-example.css'],
standalone: true,
- imports: [
- NgIf,
- MatToolbarModule,
- MatButtonModule,
- MatIconModule,
- MatSidenavModule,
- MatListModule,
- NgFor,
- ],
+ imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
})
export class SidenavResponsiveExample implements OnDestroy {
mobileQuery: MediaQueryList;
diff --git a/src/components-examples/material/sort/sort-harness/sort-harness-example.html b/src/components-examples/material/sort/sort-harness/sort-harness-example.html
index 377a0bc51923..b269a5ea4d65 100644
--- a/src/components-examples/material/sort/sort-harness/sort-harness-example.html
+++ b/src/components-examples/material/sort/sort-harness/sort-harness-example.html
@@ -7,11 +7,13 @@
Make your screen smaller to see a vertical stepper
- Make your screen larger to see a horizontal stepper
-Make your screen smaller to see a vertical stepper
+ }
+ @case ('vertical') {
+ Make your screen larger to see a horizontal stepper
+ }
+}
| {{column}} | -{{element[column]}} | -{{column}} | +{{element[column]}} | +|
|---|---|---|---|---|
| {{column}} | -{{element[column]}} | -{{column}} | +{{element[column]}} | +
|---|
| - {{column.header}} - | -- {{column.cell(row)}} - | -+ {{column.header}} + | ++ {{column.cell(row)}} + | +
|---|---|---|---|
| Position | -{{element.position}} | -Position Footer | -
|---|
| Position | +{{element.position}} | +Position Footer | +Name | -{{element.name}} | -Name Footer | -Name | +{{element.name}} | +Name Footer | +Weight | -{{element.weight}} | -Weight Footer | -Weight | +{{element.weight}} | +Weight Footer | +Symbol | -{{element.symbol}} | -Symbol Footer | -Symbol | +{{element.symbol}} | +Symbol Footer | +Filler header cell | -Filler data cell | -Filler footer cell | -Filler header cell | +Filler data cell | +Filler footer cell | +
|---|
@@ -66,21 +67,25 @@
Template-driven value (currentState): {{ currentState }}
Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}
-
- @@ -89,9 +94,9 @@ TOGGLE DISABLED
@@ -141,8 +146,11 @@
Size
Text
- - Hello - + @if (visible) { + Hello + } Hello diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.html b/src/dev-app/bottom-sheet/bottom-sheet-demo.html index 7201ea582a44..e473b19169b9 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.html +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.html @@ -36,10 +36,12 @@Options
Single Toggle
Dynamic Exclusive Selection
Your favorite type of pie is: {{favoritePie}}
Radio items
Click action: check-indeterminate
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> -
@@ -187,7 +191,9 @@ Checkbox w/ [checked] & (change)
+ @if (!demoHideLabel) {
+ Checkbox w/ [checked] & (change)
+ }
Click action: check
[indeterminate]="demoIndeterminate"
[(ngModel)]="demoChecked"
(indeterminateChange)="demoIndeterminate = $event">
- Checkbox w/ [(ngModel)]
+ @if (!demoHideLabel) {
+ Checkbox w/ [(ngModel)]
+ }
Click action: check
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> -
@@ -223,7 +231,9 @@ Checkbox w/ [checked] & (change)
+ @if (!demoHideLabel) {
+ Checkbox w/ [checked] & (change)
+ }
Click action: noop
[indeterminate]="demoIndeterminate"
[(ngModel)]="demoChecked"
(indeterminateChange)="demoIndeterminate = $event">
- Checkbox w/ [(ngModel)]
+ @if (!demoHideLabel) {
+ Checkbox w/ [(ngModel)]
+ }
Click action: noop
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> -
@@ -259,7 +271,9 @@ Checkbox w/ [checked] & (change)
+ @if (!demoHideLabel) {
+ Checkbox w/ [checked] & (change)
+ }
No animations
[indeterminate]="demoIndeterminate"
[(ngModel)]="demoChecked"
(indeterminateChange)="demoIndeterminate = $event">
- Checkbox w/ [(ngModel)]
+ @if (!demoHideLabel) {
+ Checkbox w/ [(ngModel)]
+ }
diff --git a/src/dev-app/checkbox/nested-checklist.html b/src/dev-app/checkbox/nested-checklist.html
index 6a4ab3e617ab..7e41027b7fa7 100644
--- a/src/dev-app/checkbox/nested-checklist.html
+++ b/src/dev-app/checkbox/nested-checklist.html
@@ -1,18 +1,23 @@
No animations
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> -Tasks
-
-
-
-
- -{{task.name}}
--
-
-
-
- {{subtask.name}} - -
-
+ @for (task of tasks; track task) {
+ -
-
-
+
+ +{{task.name}}
+-
+ @for (subtask of task.subtasks; track subtask) {
+
-
+
+ {{subtask.name}} + +
+ }
+
+ }
-
+
With avatar, icons, and color
With Events
{{message}}
@@ -122,19 +124,27 @@ With Events
Single selection
Multi selection
Input is last child of chip grid
NgModel with multi selection
NgModel with single selection
NgModel with single selection
Single selection without checkmark selection indicator.
Single selection with decorative icons.
Single selection with decorative icons.
Single selection with stacked appearance.
Options
Options
[disabled]="inputDisabled" [max]="maxDate">Options
[disabled]="inputDisabled" [min]="minDate">Options
[disabled]="inputDisabled">Result
[startAt]="startAt" [startView]="yearView ? 'year' : 'month'" [color]="color"> -Last input: {{lastDateInput}}
@@ -110,10 +126,12 @@Result
[disabled]="datepickerDisabled" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"> -Range picker
[disabled]="datepickerDisabled" [color]="color" #range1Picker> -{{range1.value | json}}
@@ -247,10 +267,12 @@ Range picker
[disabled]="datepickerDisabled" panelClass="demo-custom-range" #range2Picker> -{{range2.value | json}}
@@ -276,10 +298,12 @@ Range picker
[touchUi]="touch" [disabled]="datepickerDisabled" #range3Picker> -{{range3.value | json}}
@@ -296,10 +320,12 @@ Range picker with custom selection strategy
To do
cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListLockAxis]="axisLock" - [cdkDropListData]="todo" - > -
- {{item}}
-
+ [cdkDropListData]="todo">
+ @for (item of todo; track item) {
+
+ {{item}}
+
+ }
@@ -20,12 +21,13 @@ Done
cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListLockAxis]="axisLock" - [cdkDropListData]="done" - > -
- {{item}}
-
+ [cdkDropListData]="done">
+ @for (item of done; track item) {
+
+ {{item}}
+
+ }
@@ -38,12 +40,13 @@ Ages
cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" [cdkDropListLockAxis]="axisLock" - [cdkDropListData]="ages" - > -
- {{item}}
-
+ [cdkDropListData]="ages">
+ @for (item of ages; track item) {
+
+ {{item}}
+
+ }
@@ -54,12 +57,13 @@ Preferred Ages
cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" [cdkDropListLockAxis]="axisLock" - [cdkDropListData]="preferredAges" - > -
- {{item}}
-
+ [cdkDropListData]="preferredAges">
+ @for (item of preferredAges; track item) {
+
+ {{item}}
+
+ }
diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
index e7b6d5aa0c67..99b0363efea4 100644
--- a/src/dev-app/example/example-list.ts
+++ b/src/dev-app/example/example-list.ts
@@ -20,18 +20,20 @@ import {Example} from './example';
imports: [CommonModule, MatExpansionModule, Example],
template: `
-
- {{_getTitle(id)}}
- <{{id}}>
-
+
+ {{_getTitle(id)}}
+ <{{id}}>
+
- {{title}}
- <{{id}}>
-
+ @if (showLabel) {
+
+ {{title}}
+ <{{id}}>
+
+ }
-
- Could not find example {{id}}
-
+ @if (!id) {
+
+ Could not find example {{id}}
+
+ }
`,
styles: [
`
diff --git a/src/dev-app/expansion/expansion-demo.html b/src/dev-app/expansion/expansion-demo.html
index 98b14ca6ada2..8a93eed0ea06 100644
--- a/src/dev-app/expansion/expansion-demo.html
+++ b/src/dev-app/expansion/expansion-demo.html
@@ -33,7 +33,9 @@ Single Expansion Panel
Expansion Panel Animation Events
- {{event}}
+ @for (event of events; track event) {
+ {{event}}
+ }
matAccordion
@@ -78,14 +80,18 @@matAccordion
This is the content text that makes sense here.
-cdkAccordion
@@ -102,7 +108,9 @@cdkAccordion
-I only show if item 1 is expanded
+ @if (item1.expanded) { +I only show if item 1 is expanded
+ }@@ -110,7 +118,9 @@
cdkAccordion
-I only show if item 2 is expanded
+ @if (item2.expanded) { +I only show if item 2 is expanded
+ }@@ -118,7 +128,9 @@
cdkAccordion
-I only show if item 3 is expanded
+ @if (item3.expanded) { +I only show if item 3 is expanded
+ }Loading Google Maps API...
-
-
-
-
- Testing 1 2 3
-
-
-
+@if (hasLoaded) {
+ {{display?.lat}}
-{{display?.lng}}
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Testing 1 2 3
+ @if (isPolylineDisplayed) {
+
+
+
+} @else {
+ {{display?.lat}}
+{{display?.lng}}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading Google Maps API...
+}
diff --git a/src/dev-app/grid-list/grid-list-demo.html b/src/dev-app/grid-list/grid-list-demo.html
index 10d526cf00c2..f467ea7f6a01 100644
--- a/src/dev-app/grid-list/grid-list-demo.html
+++ b/src/dev-app/grid-list/grid-list-demo.html
@@ -55,10 +55,12 @@
- {{dog.name}}
- Human: {{dog.human}} -
+ {{dog.name}}
+ Human: {{dog.human}} +Regular
Text
Icons
Icon buttons
Text & Icons
$ .00 - + @if (showPrefix) { + + } @@ -491,21 +499,23 @@Textarea
-<textarea> with bindable autosize
<textarea> with bindable autosize
<textarea> with bindable autosize
Normal lists
Items
- {{contact.name}}
- extra line
- {{contact.headline}}
- {{contact.name}}
+ @if (thirdLine) {
+ extra line
+ }
+ {{contact.headline}}
+ Today
- {{message.from}}
-
- {{message.subject}} --
- {{message.message}}
-
- {{message.from}}
+
+ {{message.subject}} --
+ {{message.message}}
+
+ @if (!$last) {
+ {{message.from}}
- {{message.subject}}
- {{message.message}}
- {{message.from}}
+ {{message.subject}}
+ {{message.message}}
+ Normal lists
Dense lists
Items
- {{contact.name}}
- {{contact.headline}}
- {{contact.name}}
+ {{contact.headline}}
+ Today
- {{message.from}}
- {{message.subject}}
- {{message.message}}
- {{message.from}}
+ {{message.subject}}
+ {{message.message}}
+ Nav lists
- More info!
-
+ @if (infoClicked) {
+ More info!
+ }
Action list
Line scenarios
Line alignment
Supported input types: - {{type}}, + @for (type of supportedInputTypes; track type) { + {{type}}, + }
diff --git a/src/dev-app/portal/portal-demo.html b/src/dev-app/portal/portal-demo.html index bdb0e648447c..e6aaefc7b2c8 100644 --- a/src/dev-app/portal/portal-demo.html +++ b/src/dev-app/portal/portal-demo.html @@ -21,7 +21,7 @@The portal outlet is here:
Favorite Season Example
Dynamic Example with two-way data-binding
Your favorite season is: {{favoriteSeason}}
@@ -73,9 +75,11 @@
Value: {{ currentPokemon }}
@@ -85,7 +89,9 @@@@ -104,9 +110,9 @@
Value: {{ currentDrinkObject | json }}
@@ -174,9 +181,9 @@
-
- formControl
+ @if (showSelect) {
+
+
+ Food I would like to eat
+
+ @for (food of foods; track food) {
+ {{ food.viewValue }}
+ }
+
+
+
+
+
+ }
-
+
+ formControl
-
-
- Food I would like to eat
-
- {{ food.viewValue }}
-
-
-
-
-
+ Value: {{ foodControl.value }}
-Touched: {{ foodControl.touched }}
-Dirty: {{ foodControl.dirty }}
-Status: {{ foodControl.status }}
- - - -Value: {{ foodControl.value }}
+Touched: {{ foodControl.touched }}
+Dirty: {{ foodControl.dirty }}
+Status: {{ foodControl.status }}
+ + + +
-
- Change event
+ @if (showSelect) {
+
+
+ Starter pokemon
+
+ @for (creature of pokemon; track creature) {
+ {{ creature.viewValue }}
+ }
+
+
+
+
+
+ }
+
+ Change event
-
-
- Starter pokemon
-
- {{ creature.viewValue }}
-
-
-
-
-
-
+ Change event value: {{ latestChangeEvent?.value }}
-Change event value: {{ latestChangeEvent?.value }}
+Error message, hint, form sumbit
-Error message with errorStateMatcher
-Error message with errorStateMatcher
Error message with errorStateMatcher
Hide Single-Selection Indicator -
- Header
+@if (isLaunched) {
+
+ @if (showHeader && !coverHeader) {
+ Header
+ }
@@ -17,7 +16,9 @@
-
-
- Header
+ @if (showHeader && coverHeader) {
+ Header
+ }
-
- Footer
+ @if (showFooter && coverHeader) {
+ Footer
+ }
- Footer
+ @if (showFooter && !coverHeader) {
+ Footer
+ }
+} @else {
+
+}
diff --git a/src/dev-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts
index 42deace7e2f6..3f74bda5e271 100644
--- a/src/dev-app/slider/slider-demo.ts
+++ b/src/dev-app/slider/slider-demo.ts
@@ -17,7 +17,7 @@ import {MatButtonModule} from '@angular/material/button';
import {ThemePalette} from '@angular/material/core';
interface DialogData {
- color: string;
+ color: ThemePalette;
discrete: boolean;
showTickMarks: boolean;
}
diff --git a/src/dev-app/snack-bar/snack-bar-demo.html b/src/dev-app/snack-bar/snack-bar-demo.html
index 080876020a1c..26d54831feb0 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.html
+++ b/src/dev-app/snack-bar/snack-bar-demo.html
@@ -25,24 +25,30 @@ Mode: {{start.mode}}
-
Filler Content
+ @for (c of fillerContent; track c) {
+ Filler Content
+ }
Filler Content
+ @for (c of fillerContent; track c) {
+ Filler Content
+ }
Filler Content
+ @for (c of fillerContent; track c) {
+ Filler Content
+ }
SnackBar demo
Show button on snack bar
-Show button on snack bar
+ }Auto hide after duration
-Auto hide after duration
+ }
diff --git a/src/dev-app/stepper/stepper-demo.html b/src/dev-app/stepper/stepper-demo.html
index 9b6004bb2d8d..1dd2a5e94cda 100644
--- a/src/dev-app/stepper/stepper-demo.html
+++ b/src/dev-app/stepper/stepper-demo.html
@@ -16,7 +16,9 @@
Horizontal Stepper Demo with Text Label
Horizontal Stepper Demo with Templated Label
-
-
-
-
+
+
+
+ Stepper with autosize textarea
diff --git a/src/dev-app/table-scroll-container/table-scroll-container-demo.html b/src/dev-app/table-scroll-container/table-scroll-container-demo.html index 21aa8b40398d..69229922693e 100644 --- a/src/dev-app/table-scroll-container/table-scroll-container-demo.html +++ b/src/dev-app/table-scroll-container/table-scroll-container-demo.html @@ -35,46 +35,46 @@ -
-
-
+
+}
diff --git a/src/dev-app/youtube-player/youtube-player-demo.html b/src/dev-app/youtube-player/youtube-player-demo.html
index a7ff2eb4c615..5a8a04f8c6c2 100644
--- a/src/dev-app/youtube-player/youtube-player-demo.html
+++ b/src/dev-app/youtube-player/youtube-player-demo.html
@@ -4,9 +4,9 @@ | Position | -{{element.position}} | -Position Footer | -
|---|
| Position | +{{element.position}} | +Position Footer | +Name | -{{element.name}} | -Name Footer | -Name | +{{element.name}} | +Name Footer | +Weight | -{{element.weight}} | -Weight Footer | -Weight | +{{element.weight}} | +Weight Footer | +Symbol | -{{element.symbol}} | -Symbol Footer | -Symbol | +{{element.symbol}} | +Symbol Footer | +Filler header cell | -Filler data cell | -Filler footer cell | -Filler header cell | +Filler data cell | +Filler footer cell | +
|---|
Basic Example
+@if (apiLoaded | async) {
+}
```
## Components
diff --git a/src/google-maps/map-directions-renderer/README.md b/src/google-maps/map-directions-renderer/README.md
index d40c54678c31..f0e705d4dd51 100644
--- a/src/google-maps/map-directions-renderer/README.md
+++ b/src/google-maps/map-directions-renderer/README.md
@@ -51,7 +51,8 @@ export class GoogleMapDemo {
width="750px"
[center]="center"
[zoom]="zoom">
-
-
- {{avatarLabel}}
- {{name}}
-
-
+ @if (shouldShow) {
+
+
+ @if (avatarLabel) {
+ {{avatarLabel}}
+ }
+ {{name}}
+
+
+ }
-
- {{name}}
-
-
-
-
-
+ @if (shouldShow) {
+
+
+ {{name}}
+
+ @if (useCustomEditInput) {
+
+ }
+
+
+
+ }
-
- {{name}}
-
-
+ @if (shouldShow) {
+
+
+ {{name}}
+
+
+ }
- Click to remove this element.
-
+ @if (show) {
+ Click to remove this element.
+ }
`,
})
class RippleWithDomRemovalOnClick {
diff --git a/src/material/core/tokens/m2/mat/_fab.scss b/src/material/core/tokens/m2/mat/_fab.scss
index 1fa4a4b2ccc0..22da2e566fba 100644
--- a/src/material/core/tokens/m2/mat/_fab.scss
+++ b/src/material/core/tokens/m2/mat/_fab.scss
@@ -1,6 +1,9 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
@use '../../token-utils';
@use '../../../theming/inspection';
@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mat, fab);
@@ -14,24 +17,51 @@ $prefix: (mat, fab);
// Tokens that can be configured through Angular Material's color theming API.
@function get-color-tokens($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
- $surface: if($is-dark, #fff, #000);
+ $on-surface: if($is-dark, #fff, #000);
+ $ripple-opacities: if($is-dark,
+ mdc-ripple-theme.$light-ink-opacities,
+ mdc-ripple-theme.$dark-ink-opacities
+ );
@return (
// Color of icons and text projected into a FAB.
foreground-color: inspection.get-theme-color($theme, foreground, base),
+ // Color of the element that shows the hover, focus and pressed states.
+ state-layer-color: $on-surface,
+
+ // Color of the ripple element.
+ ripple-color: rgba($on-surface, 0.1),
+
+ // Opacity of the ripple when the button is hovered.
+ hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+ // Opacity of the ripple when the button is focused.
+ focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+ // Opacity of the ripple when the button is pressed.
+ pressed-state-layer-opacity: map.get($ripple-opacities, press),
+
// MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
// Background color of the container when the FAB is disabled.
- disabled-state-container-color: rgba($surface, 0.12),
+ disabled-state-container-color: rgba($on-surface, 0.12),
+
// Color of the icons and projected text when the FAB is disabled.
- disabled-state-foreground-color: rgba($surface, if($is-dark, 0.5, 0.38)),
+ disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
);
}
// Generates the mapping for the properties that change based on the FAB palette color.
@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $container-color: inspection.get-theme-color($theme, $palette-name);
+ $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+ $color: if($contrast-tone == 'dark', #000, #fff);
+
@return (
- foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+ foreground-color: $color,
+ state-layer-color: $color,
+ ripple-color: rgba($color, 0.1),
);
}
diff --git a/src/material/core/tokens/m2/mat/_filled-button.scss b/src/material/core/tokens/m2/mat/_filled-button.scss
new file mode 100644
index 000000000000..13cb3fdb3e2a
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_filled-button.scss
@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, filled-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $on-surface: if($is-dark, #fff, #000);
+ $ripple-opacities: if($is-dark,
+ mdc-ripple-theme.$light-ink-opacities,
+ mdc-ripple-theme.$dark-ink-opacities
+ );
+
+ @return (
+ // Color of the element that shows the hover, focus and pressed states.
+ state-layer-color: $on-surface,
+
+ // Color of the ripple element.
+ ripple-color: rgba($on-surface, 0.1),
+
+ // Opacity of the ripple when the button is hovered.
+ hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+ // Opacity of the ripple when the button is focused.
+ focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+ // Opacity of the ripple when the button is pressed.
+ pressed-state-layer-opacity: map.get($ripple-opacities, press),
+ );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $container-color: inspection.get-theme-color($theme, $palette-name);
+ $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+ $color: if($contrast-tone == 'dark', #000, #fff);
+
+ @return (
+ state-layer-color: $color,
+ ripple-color: rgba($color, 0.1),
+ );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+ @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+ @return sass-utils.deep-merge-all(
+ get-unthemable-tokens(),
+ get-color-tokens(token-utils.$placeholder-color-config),
+ get-typography-tokens(token-utils.$placeholder-typography-config),
+ get-density-tokens(token-utils.$placeholder-density-config)
+ );
+}
diff --git a/src/material/core/tokens/m2/mat/_icon-button.scss b/src/material/core/tokens/m2/mat/_icon-button.scss
new file mode 100644
index 000000000000..e28df5673dfc
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_icon-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, icon-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $on-surface: if($is-dark, #fff, #000);
+ $ripple-opacities: if($is-dark,
+ mdc-ripple-theme.$light-ink-opacities,
+ mdc-ripple-theme.$dark-ink-opacities
+ );
+
+ @return (
+ // Color of the element that shows the hover, focus and pressed states.
+ state-layer-color: $on-surface,
+
+ // Color of the ripple element.
+ ripple-color: rgba($on-surface, 0.1),
+
+ // Opacity of the ripple when the button is hovered.
+ hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+ // Opacity of the ripple when the button is focused.
+ focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+ // Opacity of the ripple when the button is pressed.
+ pressed-state-layer-opacity: map.get($ripple-opacities, press),
+ );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $color: inspection.get-theme-color($theme, $palette-name);
+
+ @return (
+ state-layer-color: $color,
+ ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+ );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+ @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+ @return sass-utils.deep-merge-all(
+ get-unthemable-tokens(),
+ get-color-tokens(token-utils.$placeholder-color-config),
+ get-typography-tokens(token-utils.$placeholder-typography-config),
+ get-density-tokens(token-utils.$placeholder-density-config)
+ );
+}
diff --git a/src/material/core/tokens/m2/mat/_outlined-button.scss b/src/material/core/tokens/m2/mat/_outlined-button.scss
new file mode 100644
index 000000000000..fb4ac47888f1
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_outlined-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, outlined-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $on-surface: if($is-dark, #fff, #000);
+ $ripple-opacities: if($is-dark,
+ mdc-ripple-theme.$light-ink-opacities,
+ mdc-ripple-theme.$dark-ink-opacities
+ );
+
+ @return (
+ // Color of the element that shows the hover, focus and pressed states.
+ state-layer-color: $on-surface,
+
+ // Color of the ripple element.
+ ripple-color: rgba($on-surface, 0.1),
+
+ // Opacity of the ripple when the button is hovered.
+ hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+ // Opacity of the ripple when the button is focused.
+ focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+ // Opacity of the ripple when the button is pressed.
+ pressed-state-layer-opacity: map.get($ripple-opacities, press),
+ );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $color: inspection.get-theme-color($theme, $palette-name);
+
+ @return (
+ state-layer-color: $color,
+ ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+ );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+ @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+ @return sass-utils.deep-merge-all(
+ get-unthemable-tokens(),
+ get-color-tokens(token-utils.$placeholder-color-config),
+ get-typography-tokens(token-utils.$placeholder-typography-config),
+ get-density-tokens(token-utils.$placeholder-density-config)
+ );
+}
diff --git a/src/material/core/tokens/m2/mat/_protected-button.scss b/src/material/core/tokens/m2/mat/_protected-button.scss
new file mode 100644
index 000000000000..f3c6c678c138
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_protected-button.scss
@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, protected-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $on-surface: if($is-dark, #fff, #000);
+ $ripple-opacities: if($is-dark,
+ mdc-ripple-theme.$light-ink-opacities,
+ mdc-ripple-theme.$dark-ink-opacities
+ );
+
+ @return (
+ // Color of the element that shows the hover, focus and pressed states.
+ state-layer-color: $on-surface,
+
+ // Color of the ripple element.
+ ripple-color: rgba($on-surface, 0.1),
+
+ // Opacity of the ripple when the button is hovered.
+ hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+ // Opacity of the ripple when the button is focused.
+ focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+ // Opacity of the ripple when the button is pressed.
+ pressed-state-layer-opacity: map.get($ripple-opacities, press),
+ );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $container-color: inspection.get-theme-color($theme, $palette-name);
+ $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+ $color: if($contrast-tone == 'dark', #000, #fff);
+
+ @return (
+ state-layer-color: $color,
+ ripple-color: rgba($color, 0.1),
+ );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+ @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+ @return sass-utils.deep-merge-all(
+ get-unthemable-tokens(),
+ get-color-tokens(token-utils.$placeholder-color-config),
+ get-typography-tokens(token-utils.$placeholder-typography-config),
+ get-density-tokens(token-utils.$placeholder-density-config)
+ );
+}
diff --git a/src/material/core/tokens/m2/mat/_ripple.scss b/src/material/core/tokens/m2/mat/_ripple.scss
new file mode 100644
index 000000000000..fdb31a365a4b
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_ripple.scss
@@ -0,0 +1,49 @@
+@use 'sass:meta';
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, ripple);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $base: inspection.get-theme-color($theme, foreground, base);
+
+ // If the base is a color *type* we can use it directly in the `rgba` call below.
+ // If it's anything else (e.g. a CSS variable) we fall back to using static colors
+ // since we don't have a way of adjusting the opacity.
+ $color: if(meta.type-of($base) == color, $base, if($is-dark, #fff, #000));
+
+ @return (
+ color: rgba($color, 0.1),
+ );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+ @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+ @return sass-utils.deep-merge-all(
+ get-unthemable-tokens(),
+ get-color-tokens(token-utils.$placeholder-color-config),
+ get-typography-tokens(token-utils.$placeholder-typography-config),
+ get-density-tokens(token-utils.$placeholder-density-config)
+ );
+}
diff --git a/src/material/core/tokens/m2/mat/_text-button.scss b/src/material/core/tokens/m2/mat/_text-button.scss
new file mode 100644
index 000000000000..7a509fa7f612
--- /dev/null
+++ b/src/material/core/tokens/m2/mat/_text-button.scss
@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, text-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $on-surface: if($is-dark, #fff, #000);
+ $ripple-opacities: if($is-dark,
+ mdc-ripple-theme.$light-ink-opacities,
+ mdc-ripple-theme.$dark-ink-opacities
+ );
+
+ @return (
+ // Color of the element that shows the hover, focus and pressed states.
+ state-layer-color: $on-surface,
+
+ // Color of the ripple element.
+ ripple-color: rgba($on-surface, 0.1),
+
+ // Opacity of the ripple when the button is hovered.
+ hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+ // Opacity of the ripple when the button is focused.
+ focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+ // Opacity of the ripple when the button is pressed.
+ pressed-state-layer-opacity: map.get($ripple-opacities, press),
+ );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $color: inspection.get-theme-color($theme, $palette-name);
+
+ @return (
+ state-layer-color: $color,
+ ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+ );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+ @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+ @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+ @return sass-utils.deep-merge-all(
+ get-unthemable-tokens(),
+ get-color-tokens(token-utils.$placeholder-color-config),
+ get-typography-tokens(token-utils.$placeholder-typography-config),
+ get-density-tokens(token-utils.$placeholder-density-config)
+ );
+}
diff --git a/src/material/core/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mdc/_extended-fab.scss
index 45a535ae863a..a82a5e93b311 100644
--- a/src/material/core/tokens/m2/mdc/_extended-fab.scss
+++ b/src/material/core/tokens/m2/mdc/_extended-fab.scss
@@ -8,6 +8,9 @@ $prefix: (mdc, extended-fab);
@function get-unthemable-tokens() {
@return (
+ // =============================================================================================
+ // = TOKENS NOT USED IN ANGULAR MATERIAL =
+ // =============================================================================================
container-color: null,
container-elevation: null,
container-height: null,
diff --git a/src/material/core/tokens/m2/mdc/_fab.scss b/src/material/core/tokens/m2/mdc/_fab.scss
index b74094cea9d4..562bf0c57b6e 100644
--- a/src/material/core/tokens/m2/mdc/_fab.scss
+++ b/src/material/core/tokens/m2/mdc/_fab.scss
@@ -26,6 +26,9 @@ $ripple-target: '.mdc-fab__ripple';
// We create a custom token for it instead.
icon-color: null,
+ // =============================================================================================
+ // = TOKENS NOT USED IN ANGULAR MATERIAL =
+ // =============================================================================================
container-elevation: null,
container-height: null,
container-shadow-color: null,
diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss
index 548f95b0ef4b..04318a9ce937 100644
--- a/src/material/core/tokens/m2/mdc/_filled-button.scss
+++ b/src/material/core/tokens/m2/mdc/_filled-button.scss
@@ -1,9 +1,9 @@
@use 'sass:map';
@use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
@use '../../../style/sass-utils';
@use '../../../theming/inspection';
@use '../../../theming/theming';
+@use '../../../mdc-helpers/mdc-helpers';
// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mdc, filled-button);
@@ -24,6 +24,9 @@ $prefix: (mdc, filled-button);
keep-touch-target: false,
pressed-container-elevation: 0,
+ // =============================================================================================
+ // = TOKENS NOT USED IN ANGULAR MATERIAL =
+ // =============================================================================================
focus-ring-color: null,
focus-ring-offset: null,
focus-state-layer-opacity: null,
@@ -43,33 +46,36 @@ $prefix: (mdc, filled-button);
with-icon-hover-icon-color: null,
with-icon-icon-color: null,
with-icon-icon-size: null,
- with-icon-pressed-icon-color: null
+ with-icon-pressed-icon-color: null,
+ focus-state-layer-color: null,
+ hover-state-layer-color: null,
+ pressed-state-layer-color: null,
);
}
-@function _on-color($theme, $palette) {
- @if ($palette) {
- $is-dark: inspection.get-theme-type($theme) == dark;
- @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
- }
-}
-
// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
- $primary: inspection.get-theme-color($theme, primary);
$surface: inspection.get-theme-color($theme, background, card);
- $on-primary: _on-color($theme, $primary);
- $on-surface: _on-color($theme, $surface);
+ $on-surface: if($is-dark, #fff, #000);
@return (
- container-color: if($color, $color, transparent),
+ container-color: $surface,
+ label-text-color: $on-surface,
disabled-container-color: rgba($on-surface, 0.12),
disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
- focus-state-layer-color: $on-primary,
- hover-state-layer-color: $on-primary,
- label-text-color: if($on-color, $on-color, inherit),
- pressed-state-layer-color: $on-primary
+ );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $container-color: inspection.get-theme-color($theme, $palette-name, default);
+ $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+
+ @return (
+ container-color: $container-color,
+ label-text-color: if($contrast-tone == 'dark', #000, #fff),
);
}
diff --git a/src/material/core/tokens/m2/mdc/_icon-button.scss b/src/material/core/tokens/m2/mdc/_icon-button.scss
index 28cddebe52bd..1fbc989bf3e2 100644
--- a/src/material/core/tokens/m2/mdc/_icon-button.scss
+++ b/src/material/core/tokens/m2/mdc/_icon-button.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
@use '../../../style/sass-utils';
@use '../../../theming/inspection';
@use '../../token-utils';
@@ -57,8 +56,6 @@ $prefix: (mdc, icon-button);
// Generates the mapping for the properties that change based on the button palette color.
@function private-get-color-palette-color-tokens($theme, $palette-name) {
- $palette: map.get($theme, $palette-name);
-
@return (
icon-color: inspection.get-theme-color($theme, $palette-name)
);
diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss
index 746fa27a5547..f837c3d817a3 100644
--- a/src/material/core/tokens/m2/mdc/_outlined-button.scss
+++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss
@@ -1,9 +1,9 @@
@use 'sass:map';
@use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
@use '../../../style/sass-utils';
@use '../../../theming/inspection';
@use '../../../theming/theming';
+@use '../../../mdc-helpers/mdc-helpers';
// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mdc, outlined-button);
@@ -21,6 +21,9 @@ $prefix: (mdc, outlined-button);
outline-width: 1px,
container-shape: 4px,
+ // =============================================================================================
+ // = TOKENS NOT USED IN ANGULAR MATERIAL =
+ // =============================================================================================
hover-state-layer-opacity: null,
focus-state-layer-opacity: null,
pressed-state-layer-opacity: null,
@@ -55,27 +58,33 @@ $prefix: (mdc, outlined-button);
);
}
-@function _on-color($theme, $palette) {
- @if ($palette) {
- $is-dark: inspection.get-theme-type($theme) == dark;
- @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
- }
-}
-
// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
$surface: inspection.get-theme-color($theme, background, card);
- $on-surface: _on-color($theme, $surface);
+ $contrast-tone: mdc-helpers.variable-safe-contrast-tone($surface, $is-dark);
+ $on-surface: if($contrast-tone == 'dark', #000, #fff);
@return (
disabled-outline-color: rgba($on-surface, 0.12),
disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
- label-text-color: if($color, $color, inherit),
+ label-text-color: if($is-dark, #fff, #000),
outline-color: rgba($on-surface, 0.12)
);
}
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ @return (
+ label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+
+ // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
+ // there are a bunch of tests internally that depend on it. We should remove this and clean
+ // up the screenshots separately.
+ outline-color: map.get(get-color-tokens($theme), outline-color),
+ );
+}
+
// Tokens that can be configured through Angular Material's typography theming API.
@function get-typography-tokens($theme) {
@return ();
diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss
index 9e456b0e5b03..ba9b0f9b1ae1 100644
--- a/src/material/core/tokens/m2/mdc/_protected-button.scss
+++ b/src/material/core/tokens/m2/mdc/_protected-button.scss
@@ -1,9 +1,9 @@
@use 'sass:map';
@use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
@use '../../../style/sass-utils';
@use '../../../theming/inspection';
@use '../../../theming/theming';
+@use '../../../mdc-helpers/mdc-helpers';
// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mdc, protected-button);
@@ -19,6 +19,9 @@ $prefix: (mdc, protected-button);
container-shape: 4px,
keep-touch-target: false,
+ // =============================================================================================
+ // = TOKENS NOT USED IN ANGULAR MATERIAL =
+ // =============================================================================================
focus-ring-color: null,
focus-ring-offset: null,
focus-state-layer-opacity: null,
@@ -43,36 +46,38 @@ $prefix: (mdc, protected-button);
with-icon-focus-icon-color: null,
with-icon-hover-icon-color: null,
with-icon-icon-color: null,
- with-icon-pressed-icon-color: null
+ with-icon-pressed-icon-color: null,
+ focus-state-layer-color: null,
+ hover-state-layer-color: null,
+ pressed-state-layer-color: null,
);
}
-@function _on-color($theme, $palette) {
- @if ($palette) {
- $is-dark: inspection.get-theme-type($theme) == dark;
- @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
- }
-}
-
// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
- $primary: inspection.get-theme-color($theme, primary);
- $surface: inspection.get-theme-color($theme, background, card);
- $on-primary: _on-color($theme, $primary);
- $on-surface: _on-color($theme, $surface);
+ $on-surface: if($is-dark, #fff, #000);
@return (
- container-color: if($color, $color, transparent),
- focus-state-layer-color: $on-primary,
- hover-state-layer-color: $on-primary,
- pressed-state-layer-color: $on-primary,
- label-text-color: if($on-color, $on-color, inherit),
+ container-color: inspection.get-theme-color($theme, background, card),
+ label-text-color: $on-surface,
disabled-container-color: rgba($on-surface, 0.12),
disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38))
);
}
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+ $is-dark: inspection.get-theme-type($theme) == dark;
+ $container-color: inspection.get-theme-color($theme, $palette-name, default);
+ $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+
+ @return (
+ container-color: $container-color,
+ label-text-color: if($contrast-tone == 'dark', #000, #fff),
+ );
+}
+
// Tokens that can be configured through Angular Material's typography theming API.
@function get-typography-tokens($theme) {
@return ();
diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts
index 261f2c34f755..14b39cd7294d 100644
--- a/src/material/datepicker/date-range-input.ts
+++ b/src/material/datepicker/date-range-input.ts
@@ -21,13 +21,13 @@ import {
Inject,
OnChanges,
SimpleChanges,
+ booleanAttribute,
} from '@angular/core';
import {MatFormFieldControl, MAT_FORM_FIELD} from '@angular/material/form-field';
import {ThemePalette, DateAdapter} from '@angular/material/core';
import {NgControl, ControlContainer, Validators} from '@angular/forms';
import {Subject, merge, Subscription} from 'rxjs';
import {FocusOrigin} from '@angular/cdk/a11y';
-import {coerceBooleanProperty, BooleanInput} from '@angular/cdk/coercion';
import {
MatStartDate,
MatEndDate,
@@ -128,7 +128,7 @@ export class MatDateRangeInputThis is the first title
-This is the second title
-This is the third title
+ @if (shouldShowTitle('first')) { +This is the first title
+ } + @if (shouldShowTitle('second')) { +This is the second title
+ } + @if (shouldShowTitle('third')) { +This is the third title
+ }This is the first title
-This is the second title
-This is the third title
+ @if (shouldShowTitle('first')) { +This is the first title
+ } + @if (shouldShowTitle('second')) { +This is the second title
+ } + @if (shouldShowTitle('third')) { +This is the third title
+ }Folders
-{{folder.name}}
-{{folder.updated}}
-{{folder.name}}
+{{folder.updated}}
+ @if (!$last) { +Notes
-{{note.name}}
-{{note.updated}}
-{{note.name}}
+{{note.updated}}
+Content
-Content
+
-
- Panel Title
-
-
`,
+ @if (expansionShown) {
+
+
+ Panel Title
+
+
+ }
+ `,
})
class PanelWithContentInNgIf {
expansionShown = true;
diff --git a/src/material/expansion/testing/BUILD.bazel b/src/material/expansion/testing/BUILD.bazel
index c5542e861fc5..1cb28edb5d0a 100644
--- a/src/material/expansion/testing/BUILD.bazel
+++ b/src/material/expansion/testing/BUILD.bazel
@@ -9,7 +9,6 @@ ts_library(
exclude = ["**/*.spec.ts"],
),
deps = [
- "//src/cdk/coercion",
"//src/cdk/testing",
],
)
diff --git a/src/material/expansion/testing/expansion-harness.ts b/src/material/expansion/testing/expansion-harness.ts
index 37e2865516ee..fa80761895c2 100644
--- a/src/material/expansion/testing/expansion-harness.ts
+++ b/src/material/expansion/testing/expansion-harness.ts
@@ -14,7 +14,7 @@ import {
import {ExpansionPanelHarnessFilters} from './expansion-harness-filters';
/** Selectors for the various `mat-expansion-panel` sections that may contain user content. */
-export const enum MatExpansionPanelSection {
+export enum MatExpansionPanelSection {
HEADER = '.mat-expansion-panel-header',
TITLE = '.mat-expansion-panel-header-title',
DESCRIPTION = '.mat-expansion-panel-header-description',
diff --git a/src/material/form-field/form-field.md b/src/material/form-field/form-field.md
index 5ccf3129b13b..a393f128eb24 100644
--- a/src/material/form-field/form-field.md
+++ b/src/material/form-field/form-field.md
@@ -86,7 +86,7 @@ has interacted with the element or the parent form has been submitted. Since the
same space as the hints, the hints are hidden when the errors are shown.
If a form field can have more than one error state, it is up to the consumer to toggle which
-messages should be displayed. This can be done with CSS, `ngIf` or `ngSwitch`. Multiple error
+messages should be displayed. This can be done with CSS, `@if` or `@switch`. Multiple error
messages can be shown at the same time if desired, but the `First line
Second line -{{message.from}}
-- {{message.subject}} - -- {{message.content}} -
-{{message.from}}
++ {{message.subject}} + -- {{message.content}} +
+{{message.from}}
-{{message.subject}}
-{{message.content}}
-{{message.from}}
+{{message.subject}}
+{{message.content}}
+{{message.from}}
-- {{message.subject}} - -- {{message.content}} -
-{{message.from}}
++ {{message.subject}} + -- {{message.content}} +
+{{message.from}}
-- {{message.subject}} - -- {{message.content}} -
-{{message.from}}
++ {{message.subject}} + -- {{message.content}} +
+Folders
-{{folder.name}}
-{{folder.updated}}
-{{folder.name}}
+{{folder.updated}}
+Notes
-{{note.name}}
-{{note.updated}}
-{{note.name}}
+{{note.updated}}
+{{item.name}}
-{{item.description}}
-{{item.name}}
+{{item.description}}
+{{item.name}}
-{{item.description}}
-Some other text
-{{item.name}}
+{{item.description}}
+Some other text
+Line 1
-Line 2
-Line 3
-Line 4
-Line 1
+Line 2
+Line 3
+Line 4
+{{item.name}}
-{{item.description}}
-{{item.name}}
+{{item.description}}
+{{item.name}}
-{{item.description}}
-Some other text
-{{item.name}}
+{{item.description}}
+ @if (showThirdLine) { +Some other text
+ } +
-
+ @if (true) {
+
+
+ }
`,
encapsulation: ViewEncapsulation.ShadowDom,
})
diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
index 3c9d2774a2cf..4066fb9e04c6 100644
--- a/src/material/progress-spinner/progress-spinner.ts
+++ b/src/material/progress-spinner/progress-spinner.ts
@@ -16,18 +16,10 @@ import {
Optional,
ViewChild,
ViewEncapsulation,
+ numberAttribute,
} from '@angular/core';
-import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
+import {ThemePalette} from '@angular/material/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
-
-// Boilerplate for applying mixins to MatProgressBar.
-const _MatProgressSpinnerBase = mixinColor(
- class {
- constructor(public _elementRef: ElementRef) {}
- },
- 'primary',
-);
/** Possible mode for a progress spinner. */
export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
@@ -78,6 +70,7 @@ const BASE_STROKE_WIDTH = 10;
// set tab index to -1 so screen readers will read the aria-label
// Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
'tabindex': '-1',
+ '[class]': '"mat-" + color',
'[class._mat-animation-noopable]': `_noopAnimations`,
'[class.mdc-circular-progress--indeterminate]': 'mode === "indeterminate"',
'[style.width.px]': 'diameter',
@@ -89,32 +82,46 @@ const BASE_STROKE_WIDTH = 10;
'[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
'[attr.mode]': 'mode',
},
- inputs: ['color'],
templateUrl: 'progress-spinner.html',
styleUrls: ['progress-spinner.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
-export class MatProgressSpinner extends _MatProgressSpinnerBase implements CanColor {
+export class MatProgressSpinner {
/** Whether the _mat-animation-noopable class should be applied, disabling animations. */
_noopAnimations: boolean;
+ // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
+ /** Theme palette color of the progress spinner. */
+ @Input()
+ get color() {
+ return this._color || this._defaultColor;
+ }
+ set color(value: string | null | undefined) {
+ this._color = value;
+ }
+ private _color: string | null | undefined;
+ private _defaultColor: ThemePalette = 'primary';
+
/** The element of the determinate spinner. */
@ViewChild('determinateSpinner') _determinateCircle: ElementRef
-
-
-
- {{ food.viewValue }}
-
-
-
-
+ @if (isShowing) {
+
+
+
+ @for (food of foods; track food) {
+ {{ food.viewValue }}
+ }
+
+
+
+ }
`,
})
class NgIfSelect {
@@ -4696,7 +4704,9 @@ class NgIfSelect {
template: `
-
-
-
-
+
+
+
+
@@ -1988,10 +1990,9 @@ class SimplePreselectedMatHorizontalStepperApp {
@Component({
template: `
-
`,
})
@@ -2006,11 +2007,12 @@ class SimpleStepperWithoutStepControl {
@Component({
template: `
-
`,
})
@@ -2058,13 +2060,13 @@ class IconOverridesStepper {
@Component({
template: `
-
+ @if (true) {
Custom edit
Custom done
{{getRomanNumeral(index + 1)}}
-
+ }
Content 1
Content 2
@@ -2103,11 +2105,11 @@ class StepperWithAriaInputs {
@Component({
template: `
-
+ @if (true) {
Content 1
Content 2
Content 3
-
+ }
`,
})
@@ -2120,9 +2122,11 @@ class StepperWithIndirectDescendantSteps {}
Step 1
-
- Step 2
-
+ @if (showStep2) {
+
+ Step 2
+
+ }
`,
})
@@ -2187,7 +2191,9 @@ class StepperWithLazyContent {
template: `
Content 1
- Content 2
+ @if (renderSecondStep) {
+ Content 2
+ }
Content 3
`,
diff --git a/src/material/stepper/testing/step-harness-filters.ts b/src/material/stepper/testing/step-harness-filters.ts
index 7b67c56e8bca..f13034f32c45 100644
--- a/src/material/stepper/testing/step-harness-filters.ts
+++ b/src/material/stepper/testing/step-harness-filters.ts
@@ -8,7 +8,7 @@
import {BaseHarnessFilters} from '@angular/cdk/testing';
/** Possible orientations for a stepper. */
-export const enum StepperOrientation {
+export enum StepperOrientation {
HORIZONTAL,
VERTICAL,
}
diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts
index 934d3668028b..f18239dd0786 100644
--- a/src/material/tabs/paginated-tab-header.ts
+++ b/src/material/tabs/paginated-tab-header.ts
@@ -20,14 +20,10 @@ import {
Directive,
Inject,
Input,
+ booleanAttribute,
+ numberAttribute,
} from '@angular/core';
import {Direction, Directionality} from '@angular/cdk/bidi';
-import {
- BooleanInput,
- coerceBooleanProperty,
- coerceNumberProperty,
- NumberInput,
-} from '@angular/cdk/coercion';
import {ViewportRuler} from '@angular/cdk/scrolling';
import {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';
import {ENTER, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
@@ -128,21 +124,15 @@ export abstract class MatPaginatedTabHeader
* Whether pagination should be disabled. This can be used to avoid unnecessary
* layout recalculations if it's known that pagination won't be required.
*/
- @Input()
- get disablePagination(): boolean {
- return this._disablePagination;
- }
- set disablePagination(value: BooleanInput) {
- this._disablePagination = coerceBooleanProperty(value);
- }
- private _disablePagination: boolean = false;
+ @Input({transform: booleanAttribute})
+ disablePagination: boolean = false;
/** The index of the active tab. */
get selectedIndex(): number {
return this._selectedIndex;
}
- set selectedIndex(value: NumberInput) {
- value = coerceNumberProperty(value);
+ set selectedIndex(v: unknown) {
+ const value = numberAttribute(v, 0);
if (this._selectedIndex != value) {
this._selectedIndexChanged = true;
diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts
index 31b468ec456a..a392c10ded1f 100644
--- a/src/material/tabs/tab-group.spec.ts
+++ b/src/material/tabs/tab-group.spec.ts
@@ -1158,10 +1158,12 @@ class SimpleTabsTestApp {
(focusChange)="handleFocus($event)"
(selectedTabChange)="handleSelection($event)"
[disablePagination]="disablePagination">
-
- {{tab.label}}
- {{tab.content}}
-
+ @for (tab of tabs; track tab) {
+
+ {{tab.label}}
+ {{tab.content}}
+
+ }
`,
})
@@ -1186,9 +1188,9 @@ class SimpleDynamicTabsTestApp {
@Component({
template: `
-
- {{tab.content}}
-
+ @for (tab of tabs; track tab) {
+ {{tab.content}}
+ }
`,
})
@@ -1234,10 +1236,12 @@ class DisabledTabsTestApp {
@Component({
template: `
-
- {{ tab.label }}
- {{ tab.content }}
-
+ @for (tab of tabs | async; track tab) {
+
+ {{ tab.label }}
+ {{ tab.content }}
+
+ }
`,
})
@@ -1327,7 +1331,9 @@ class TabGroupWithAriaInputs {
Broccoli, spinach
-
-
+ @if (true) {
Tab one content
Tab two content
-
+ }
`,
})
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index da919665fbf0..51a0dcad50d3 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -23,23 +23,13 @@ import {
QueryList,
ViewChild,
ViewEncapsulation,
+ booleanAttribute,
+ numberAttribute,
} from '@angular/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {MAT_TAB_GROUP, MatTab} from './tab';
import {MatTabHeader} from './tab-header';
-import {
- BooleanInput,
- coerceBooleanProperty,
- coerceNumberProperty,
- NumberInput,
-} from '@angular/cdk/coercion';
-import {
- CanColor,
- CanDisableRipple,
- mixinColor,
- mixinDisableRipple,
- ThemePalette,
-} from '@angular/material/core';
+import {ThemePalette} from '@angular/material/core';
import {merge, Subscription} from 'rxjs';
import {MAT_TABS_CONFIG, MatTabsConfig} from './tab-config';
import {startWith} from 'rxjs/operators';
@@ -48,17 +38,6 @@ import {FocusOrigin} from '@angular/cdk/a11y';
/** Used to generate unique ID's for each tab component */
let nextId = 0;
-// Boilerplate for applying mixins to MatTabGroup.
-/** @docs-private */
-const _MatTabGroupMixinBase = mixinColor(
- mixinDisableRipple(
- class {
- constructor(public _elementRef: ElementRef) {}
- },
- ),
- 'primary',
-);
-
/** @docs-private */
export interface MatTabGroupBaseHeader {
_alignInkBarToSelectedTab(): void;
@@ -82,7 +61,6 @@ export type MatTabHeaderPosition = 'above' | 'below';
encapsulation: ViewEncapsulation.None,
// tslint:disable-next-line:validate-decorators
changeDetection: ChangeDetectionStrategy.Default,
- inputs: ['color', 'disableRipple'],
providers: [
{
provide: MAT_TAB_GROUP,
@@ -92,16 +70,14 @@ export type MatTabHeaderPosition = 'above' | 'below';
host: {
'ngSkipHydration': '',
'class': 'mat-mdc-tab-group',
+ '[class]': '"mat-" + (color || "primary")',
'[class.mat-mdc-tab-group-dynamic-height]': 'dynamicHeight',
'[class.mat-mdc-tab-group-inverted-header]': 'headerPosition === "below"',
'[class.mat-mdc-tab-group-stretch-tabs]': 'stretchTabs',
'[style.--mat-tab-animation-duration]': 'animationDuration',
},
})
-export class MatTabGroup
- extends _MatTabGroupMixinBase
- implements AfterContentInit, AfterContentChecked, OnDestroy, CanColor, CanDisableRipple
-{
+export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDestroy {
/**
* All tabs inside the tab group. This includes tabs that belong to groups that are nested
* inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
@@ -128,49 +104,37 @@ export class MatTabGroup
/** Subscription to changes in the tab labels. */
private _tabLabelSubscription = Subscription.EMPTY;
- /** Whether the ink bar should fit its width to the size of the tab label content. */
+ /** Theme color of the tab group. */
@Input()
+ color: ThemePalette;
+
+ /** Whether the ink bar should fit its width to the size of the tab label content. */
+ @Input({transform: booleanAttribute})
get fitInkBarToContent(): boolean {
return this._fitInkBarToContent;
}
- set fitInkBarToContent(v: BooleanInput) {
- this._fitInkBarToContent = coerceBooleanProperty(v);
+ set fitInkBarToContent(value: boolean) {
+ this._fitInkBarToContent = value;
this._changeDetectorRef.markForCheck();
}
private _fitInkBarToContent = false;
/** Whether tabs should be stretched to fill the header. */
- @Input('mat-stretch-tabs')
- get stretchTabs(): boolean {
- return this._stretchTabs;
- }
- set stretchTabs(v: BooleanInput) {
- this._stretchTabs = coerceBooleanProperty(v);
- }
- private _stretchTabs = true;
+ @Input({alias: 'mat-stretch-tabs', transform: booleanAttribute})
+ stretchTabs: boolean = true;
/** Whether the tab group should grow to the size of the active tab. */
- @Input()
- get dynamicHeight(): boolean {
- return this._dynamicHeight;
- }
-
- set dynamicHeight(value: BooleanInput) {
- this._dynamicHeight = coerceBooleanProperty(value);
- }
-
- private _dynamicHeight: boolean = false;
+ @Input({transform: booleanAttribute})
+ dynamicHeight: boolean = false;
/** The index of the active tab. */
- @Input()
+ @Input({transform: numberAttribute})
get selectedIndex(): number | null {
return this._selectedIndex;
}
-
- set selectedIndex(value: NumberInput) {
- this._indexToSelect = coerceNumberProperty(value, null);
+ set selectedIndex(value: number) {
+ this._indexToSelect = isNaN(value) ? null : value;
}
-
private _selectedIndex: number | null = null;
/** Position of the tab header. */
@@ -181,11 +145,10 @@ export class MatTabGroup
get animationDuration(): string {
return this._animationDuration;
}
-
- set animationDuration(value: NumberInput) {
- this._animationDuration = /^\d+$/.test(value + '') ? value + 'ms' : (value as string);
+ set animationDuration(value: string | number) {
+ const stringValue = value + '';
+ this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
}
-
private _animationDuration: string;
/**
@@ -194,13 +157,13 @@ export class MatTabGroup
* The `tabindex` will be removed automatically for inactive tabs.
* Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
*/
- @Input()
+ @Input({transform: numberAttribute})
get contentTabIndex(): number | null {
return this._contentTabIndex;
}
- set contentTabIndex(value: NumberInput) {
- this._contentTabIndex = coerceNumberProperty(value, null);
+ set contentTabIndex(value: number) {
+ this._contentTabIndex = isNaN(value) ? null : value;
}
private _contentTabIndex: number | null;
@@ -209,32 +172,20 @@ export class MatTabGroup
* Whether pagination should be disabled. This can be used to avoid unnecessary
* layout recalculations if it's known that pagination won't be required.
*/
- @Input()
- get disablePagination(): boolean {
- return this._disablePagination;
- }
+ @Input({transform: booleanAttribute})
+ disablePagination: boolean = false;
- set disablePagination(value: BooleanInput) {
- this._disablePagination = coerceBooleanProperty(value);
- }
-
- private _disablePagination: boolean = false;
+ /** Whether ripples in the tab group are disabled. */
+ @Input({transform: booleanAttribute})
+ disableRipple: boolean = false;
/**
* By default tabs remove their content from the DOM while it's off-screen.
* Setting this to `true` will keep it in the DOM which will prevent elements
* like iframes and videos from reloading next time it comes back into the view.
*/
- @Input()
- get preserveContent(): boolean {
- return this._preserveContent;
- }
-
- set preserveContent(value: BooleanInput) {
- this._preserveContent = coerceBooleanProperty(value);
- }
-
- private _preserveContent: boolean = false;
+ @Input({transform: booleanAttribute})
+ preserveContent: boolean = false;
/** Background color of the tab group. */
@Input()
@@ -273,12 +224,11 @@ export class MatTabGroup
private _groupId: number;
constructor(
- elementRef: ElementRef,
+ readonly _elementRef: ElementRef,
private _changeDetectorRef: ChangeDetectorRef,
@Inject(MAT_TABS_CONFIG) @Optional() defaultConfig?: MatTabsConfig,
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
) {
- super(elementRef);
this._groupId = nextId++;
this.animationDuration =
defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : '500ms';
@@ -288,7 +238,9 @@ export class MatTabGroup
: false;
this.dynamicHeight =
defaultConfig && defaultConfig.dynamicHeight != null ? defaultConfig.dynamicHeight : false;
- this.contentTabIndex = defaultConfig?.contentTabIndex ?? null;
+ if (defaultConfig?.contentTabIndex != null) {
+ this.contentTabIndex = defaultConfig.contentTabIndex;
+ }
this.preserveContent = !!defaultConfig?.preserveContent;
this.fitInkBarToContent =
defaultConfig && defaultConfig.fitInkBarToContent != null
@@ -502,7 +454,7 @@ export class MatTabGroup
* height property is true.
*/
_setTabBodyWrapperHeight(tabHeight: number): void {
- if (!this._dynamicHeight || !this._tabBodyWrapperHeight) {
+ if (!this.dynamicHeight || !this._tabBodyWrapperHeight) {
return;
}
diff --git a/src/material/tabs/tab-header.spec.ts b/src/material/tabs/tab-header.spec.ts
index fda6f442ab51..920cb195f12b 100644
--- a/src/material/tabs/tab-header.spec.ts
+++ b/src/material/tabs/tab-header.spec.ts
@@ -723,12 +723,11 @@ interface Tab {
(indexFocused)="focusedIndex = $event"
(selectFocusedIndex)="selectedIndex = $event"
[disablePagination]="disablePagination">
-
+ }
`,
diff --git a/src/material/tabs/tab-header.ts b/src/material/tabs/tab-header.ts
index 6356af386a21..963a5982b201 100644
--- a/src/material/tabs/tab-header.ts
+++ b/src/material/tabs/tab-header.ts
@@ -23,6 +23,7 @@ import {
QueryList,
ViewChild,
ViewEncapsulation,
+ booleanAttribute,
} from '@angular/core';
import {ViewportRuler} from '@angular/cdk/scrolling';
import {Platform} from '@angular/cdk/platform';
@@ -31,7 +32,6 @@ import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {MatTabLabelWrapper} from './tab-label-wrapper';
import {MatInkBar} from './ink-bar';
import {MatPaginatedTabHeader} from './paginated-tab-header';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
/**
* The header of the tab group which displays a list of all the tabs in the tab group. Includes
@@ -68,16 +68,8 @@ export class MatTabHeader
_inkBar: MatInkBar;
/** Whether the ripple effect is disabled or not. */
- @Input()
- get disableRipple(): boolean {
- return this._disableRipple;
- }
-
- set disableRipple(value: BooleanInput) {
- this._disableRipple = coerceBooleanProperty(value);
- }
-
- private _disableRipple: boolean = false;
+ @Input({transform: booleanAttribute})
+ disableRipple: boolean = false;
constructor(
elementRef: ElementRef,
diff --git a/src/material/tabs/tab-label-wrapper.ts b/src/material/tabs/tab-label-wrapper.ts
index f954e4157402..15e2a778f33f 100644
--- a/src/material/tabs/tab-label-wrapper.ts
+++ b/src/material/tabs/tab-label-wrapper.ts
@@ -6,18 +6,15 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {Directive, ElementRef} from '@angular/core';
+import {Directive, ElementRef, Input, booleanAttribute} from '@angular/core';
import {mixinInkBarItem} from './ink-bar';
-import {CanDisable, mixinDisabled} from '@angular/material/core';
// Boilerplate for applying mixins to MatTabLabelWrapper.
/** @docs-private */
const _MatTabLabelWrapperMixinBase = mixinInkBarItem(
- mixinDisabled(
- class {
- elementRef: ElementRef;
- },
- ),
+ class {
+ elementRef: ElementRef;
+ },
);
/**
@@ -26,13 +23,17 @@ const _MatTabLabelWrapperMixinBase = mixinInkBarItem(
*/
@Directive({
selector: '[matTabLabelWrapper]',
- inputs: ['disabled', 'fitInkBarToContent'],
+ inputs: ['fitInkBarToContent'],
host: {
'[class.mat-mdc-tab-disabled]': 'disabled',
'[attr.aria-disabled]': '!!disabled',
},
})
-export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase implements CanDisable {
+export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase {
+ /** Whether the tab is disabled. */
+ @Input({transform: booleanAttribute})
+ disabled: boolean = false;
+
constructor(override elementRef: ElementRef) {
super();
}
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index df4c41485d37..e1a749f65ad2 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -526,14 +526,13 @@ describe('MatTabNavBar with enabled animations', () => {
[disableRipple]="disableRippleOnBar"
[fitInkBarToContent]="fitInkBarToContent"
[tabPanel]="tabPanel">
-
- Tab link {{label}}
-
+ @for (tab of tabs; track tab; let index = $index) {
+ Tab link {{label}}
+ }
pizza is active
+ @if (pizza.isActive) {
+ pizza is active
+ }
`,
})
class TabGroupWithIsActiveBinding {}
@@ -1345,10 +1351,10 @@ class TabsWithCustomAnimationDuration {}
@Component({
template: `
- {{tab.label}}
-
+ (click)="selectedIndex = i">{{tab.label}}
-
+ [matTooltipPosition]="position">Button
+ }
`,
})
class ScrollableTooltipDemo {
@@ -1599,10 +1598,10 @@ class OnPushTooltipDemo {
@Component({
selector: 'app',
template: `
- `,
+ @for (tooltip of tooltips; track tooltip) {
+
+ }
+ `,
})
class DynamicTooltipsDemo {
tooltips: string[] = [];
diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts
index 6294f6459de0..7648b1a32bdc 100644
--- a/src/material/tree/node.ts
+++ b/src/material/tree/node.ts
@@ -22,6 +22,8 @@ import {
IterableDiffers,
OnDestroy,
OnInit,
+ booleanAttribute,
+ numberAttribute,
} from '@angular/core';
import {CanDisable, HasTabIndex} from '@angular/material/core';
import {BooleanInput, coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
@@ -42,7 +44,6 @@ function isLegacyTreeKeyManager
-
+ @if (isExpanded(node)) {
+
+
+ }
-
+ @if (isExpanded(node)) {
+
+
+ }
`,
diff --git a/src/youtube-player/youtube-player.spec.ts b/src/youtube-player/youtube-player.spec.ts
index ec3e45d9818c..777be4fb2e20 100644
--- a/src/youtube-player/youtube-player.spec.ts
+++ b/src/youtube-player/youtube-player.spec.ts
@@ -554,17 +554,19 @@ describe('YoutubePlayer', () => {
@Component({
selector: 'test-app',
template: `
-