From f3f0fb8a70a9132097fd2014c4b87b9b255fefbd Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 6 Nov 2023 11:01:06 +0100 Subject: [PATCH] build: switch development apps to new control flow Switches the dev and e2e apps to use the new control flow. --- .../autocomplete/autocomplete-demo.html | 62 +-- src/dev-app/autocomplete/autocomplete-demo.ts | 6 +- src/dev-app/badge/badge-demo.html | 6 +- .../bottom-sheet/bottom-sheet-demo.html | 12 +- src/dev-app/bottom-sheet/bottom-sheet-demo.ts | 10 +- .../button-toggle/button-toggle-demo.html | 6 +- src/dev-app/cdk-menu/cdk-menu-demo.html | 36 +- src/dev-app/checkbox/checkbox-demo.html | 32 +- src/dev-app/checkbox/nested-checklist.html | 35 +- src/dev-app/chips/chips-demo.html | 133 ++++--- .../connected-overlay-demo.html | 6 +- src/dev-app/datepicker/datepicker-demo.html | 110 ++++-- src/dev-app/dev-app/dev-app-layout.html | 18 +- src/dev-app/drag-drop/drag-drop-demo.html | 52 +-- src/dev-app/example/example-list.ts | 24 +- src/dev-app/example/example.ts | 18 +- src/dev-app/expansion/expansion-demo.html | 36 +- src/dev-app/focus-trap/focus-trap-demo.html | 11 +- src/dev-app/google-map/google-map-demo.html | 372 ++++++++++-------- src/dev-app/grid-list/grid-list-demo.html | 54 +-- src/dev-app/input/input-demo.html | 80 ++-- src/dev-app/list/list-demo.html | 152 ++++--- src/dev-app/menu/menu-demo.html | 66 ++-- src/dev-app/performance/performance-demo.html | 26 +- src/dev-app/performance/performance-demo.ts | 2 +- src/dev-app/platform/platform-demo.html | 4 +- src/dev-app/portal/portal-demo.html | 2 +- src/dev-app/radio/radio-demo.html | 8 +- src/dev-app/select/select-demo.html | 174 ++++---- src/dev-app/sidenav/sidenav-demo.html | 40 +- src/dev-app/snack-bar/snack-bar-demo.html | 34 +- src/dev-app/stepper/stepper-demo.html | 28 +- .../table-scroll-container-demo.html | 72 ++-- .../youtube-player/youtube-player-demo.html | 6 +- src/e2e-app/components/e2e-app/e2e-app.html | 10 +- 35 files changed, 988 insertions(+), 755 deletions(-) diff --git a/src/dev-app/autocomplete/autocomplete-demo.html b/src/dev-app/autocomplete/autocomplete-demo.html index 6bbe1e9bec6c..9296652d082f 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.html +++ b/src/dev-app/autocomplete/autocomplete-demo.html @@ -21,11 +21,12 @@ [hideSingleSelectionIndicator]="reactiveHideSingleSelectionIndicator" [autoActiveFirstOption]="reactiveAutoActiveFirstOption" [requireSelection]="reactiveRequireSelection"> - - {{ state.name }} - ({{ state.code }}) - + @for (state of reactiveStates; track state; let index = $index) { + + {{ state.name }} + ({{ state.code }}) + + }

@@ -66,21 +67,25 @@

Template-driven value (currentState): {{ currentState }}
Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}
- - - State - - - - {{ state.name }} - - - + + @if (true) { + + State + + + @for (state of tdStates; track state) { + + {{ state.name }} + + } + + + }

@@ -89,9 +94,9 @@ TOGGLE DISABLED

@@ -141,8 +146,11 @@ - - {{ state.name }} - + @for (group of filteredGroupedStates; track group) { + + @for (state of group.states; track state) { + {{ state.name }} + } + + } diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts index 08a9a9df027c..af551041dcde 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.ts +++ b/src/dev-app/autocomplete/autocomplete-demo.ts @@ -224,9 +224,9 @@ export class AutocompleteDemo { T-Shirt Size - - {{size}} - + @for (size of sizes; track size) { + {{size}} + } diff --git a/src/dev-app/badge/badge-demo.html b/src/dev-app/badge/badge-demo.html index f25109539acf..9de265315fa1 100644 --- a/src/dev-app/badge/badge-demo.html +++ b/src/dev-app/badge/badge-demo.html @@ -54,9 +54,9 @@

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

- - folder - Action {{ action }} - Description - + @for (action of [1, 2, 3]; track action) { + + folder + Action {{ action }} + Description + + } diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts index 7e6b58a7d446..6f1e7fe52d97 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts @@ -70,10 +70,12 @@ export class BottomSheetDemo { @Component({ template: ` - - Action {{ action }} - Description - + @for (action of [1, 2, 3]; track action) { + + Action {{ action }} + Description + + } `, standalone: true, diff --git a/src/dev-app/button-toggle/button-toggle-demo.html b/src/dev-app/button-toggle/button-toggle-demo.html index a6db320b7973..b2cfc8186f3e 100644 --- a/src/dev-app/button-toggle/button-toggle-demo.html +++ b/src/dev-app/button-toggle/button-toggle-demo.html @@ -83,9 +83,9 @@

Single Toggle

Dynamic Exclusive Selection

- - {{pie}} - + @for (pie of pieOptions; track pie) { + {{pie}} + }

Your favorite type of pie is: {{favoritePie}}

diff --git a/src/dev-app/cdk-menu/cdk-menu-demo.html b/src/dev-app/cdk-menu/cdk-menu-demo.html index ed790605b587..545b4ca0ce6e 100644 --- a/src/dev-app/cdk-menu/cdk-menu-demo.html +++ b/src/dev-app/cdk-menu/cdk-menu-demo.html @@ -145,48 +145,44 @@

Radio items

- + (cdkMenuItemTriggered)="selectedSize = size">{{size}} + }
- + (cdkMenuItemTriggered)="selectedColor = color">{{color}} + }
- + (cdkMenuItemTriggered)="selectedSize = size">{{size}} + }
- + (cdkMenuItemTriggered)="selectedColor = color">{{color}} + }
diff --git a/src/dev-app/checkbox/checkbox-demo.html b/src/dev-app/checkbox/checkbox-demo.html index ce19e105b890..8bd338ef7ae5 100644 --- a/src/dev-app/checkbox/checkbox-demo.html +++ b/src/dev-app/checkbox/checkbox-demo.html @@ -151,7 +151,9 @@
Click action: check-indeterminate
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> - Checkbox w/ [checked] & (change) + @if (!demoHideLabel) { + Checkbox w/ [checked] & (change) + } Click action: check-indeterminate [indeterminate]="demoIndeterminate" [(ngModel)]="demoChecked" (indeterminateChange)="demoIndeterminate = $event"> - Checkbox w/ [(ngModel)] + @if (!demoHideLabel) { + Checkbox w/ [(ngModel)] + }
@@ -187,7 +191,9 @@
Click action: check
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> - 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)] + }
@@ -223,7 +231,9 @@
Click action: noop
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> - 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)] + }
@@ -259,7 +271,9 @@
No animations
[indeterminate]="demoIndeterminate" (change)="demoChecked = $event.checked" (indeterminateChange)="demoIndeterminate = $event"> - 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 @@

Tasks

diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index 894a2a2c60b1..60b2ded6ec09 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -95,13 +95,15 @@

With avatar, icons, and color

With Events

- - With Events - - + @if (visible) { + + With Events + + + }
{{message}}
@@ -122,19 +124,27 @@

With Events

Single selection

- - {{shirtSize.label}} - {{shirtSize.avatar}} - + @for (shirtSize of shirtSizes; track shirtSize) { + + {{shirtSize.label}} + @if (listboxesWithAvatar) { + {{shirtSize.avatar}} + } + + }

Multi selection

- - {{hint.avatar}} - {{hint.label}} - + @for (hint of restaurantHints; track hint) { + + @if (listboxesWithAvatar) { + {{hint.avatar}} + } + {{hint.label}} + + } @@ -163,15 +173,17 @@

Input is last child of chip grid

New Contributor... - - {{person.name}} - - + @for (person of people; track person) { + + {{person.name}} + + + } Input is next sibling child of chip grid New Contributor... - - {{person.name}} - - + @for (person of people; track person) { + + {{person.name}} + + + } Stacked

- - {{aColor.name}} - + @for (aColor of availableColors; track aColor) { + {{aColor.name}} + }

NgModel with multi selection

- - {{aColor.name}} - + @for (aColor of availableColors; track aColor) { + {{aColor.name}} + } The selected colors are - - {{color}}{{isLast ? '' : ', '}}. + @for (color of selectedColors; track color; let isLast = $last) { + {{color}}{{isLast ? '' : ', '}} + }

NgModel with single selection

- - {{aColor.name}} - + @for (aColor of availableColors; track aColor) { + {{aColor.name}} + } The selected color is {{selectedColor}}. @@ -254,21 +266,22 @@

NgModel with single selection

Single selection without checkmark selection indicator.

- - {{aColor.name}} - + @for (aColor of availableColors; track aColor) { + {{aColor.name}} + }

Single selection with decorative icons.

- - home - {{aColor.name}} - star - + @for (aColor of availableColors; track aColor) { + + home + {{aColor.name}} + star + + } The selected color is {{selectedColor}}. @@ -276,11 +289,13 @@

Single selection with decorative icons.

Single selection with stacked appearance.

- - {{aColor.name}} - star - + @for (aColor of availableColors; track aColor) { + + {{aColor.name}} + star + + } The selected color is {{selectedColor}}. diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.html b/src/dev-app/connected-overlay/connected-overlay-demo.html index c0d6bee6f8f6..ebdcea4a2014 100644 --- a/src/dev-app/connected-overlay/connected-overlay-demo.html +++ b/src/dev-app/connected-overlay/connected-overlay-demo.html @@ -111,7 +111,11 @@

Options

-
  • {{itemText}} {{i}}
+
    + @for (item of itemArray; track item; let i = $index) { +
  • {{itemText}} {{i}}
    • + } +
diff --git a/src/dev-app/datepicker/datepicker-demo.html b/src/dev-app/datepicker/datepicker-demo.html index ccbb216015fe..f2132816a6c5 100644 --- a/src/dev-app/datepicker/datepicker-demo.html +++ b/src/dev-app/datepicker/datepicker-demo.html @@ -21,10 +21,12 @@

Options

[disabled]="inputDisabled" [max]="maxDate"> - - - - + @if (showActions) { + + + + + } @@ -33,10 +35,12 @@

Options

[disabled]="inputDisabled" [min]="minDate"> - - - - + @if (showActions) { + + + + + }

@@ -47,10 +51,12 @@

Options

[disabled]="inputDisabled"> - - - - + @if (showActions) { + + + + + }

@@ -78,17 +84,27 @@

Result

[startAt]="startAt" [startView]="yearView ? 'year' : 'month'" [color]="color"> - - - - + @if (showActions) { + + + + + } - - "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date! - - Too early! - Too late! - Date unavailable! + @if (resultPickerModel.hasError('matDatepickerParse')) { + + "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date! + + } + @if (resultPickerModel.hasError('matDatepickerMin')) { + Too early! + } + @if (resultPickerModel.hasError('matDatepickerMax')) { + Too late! + } + @if (resultPickerModel.hasError('matDatepickerFilter')) { + Date unavailable! + }

Last input: {{lastDateInput}}

@@ -110,10 +126,12 @@

Result

[disabled]="datepickerDisabled" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"> - - - - + @if (showActions) { + + + + + }

@@ -217,10 +235,12 @@

Range picker

[disabled]="datepickerDisabled" [color]="color" #range1Picker> - - - - + @if (showActions) { + + + + + }
{{range1.value | json}}
@@ -247,10 +267,12 @@

Range picker

[disabled]="datepickerDisabled" panelClass="demo-custom-range" #range2Picker> - - - - + @if (showActions) { + + + + + }
{{range2.value | json}}
@@ -276,10 +298,12 @@

Range picker

[touchUi]="touch" [disabled]="datepickerDisabled" #range3Picker> - - - - + @if (showActions) { + + + + + }
{{range3.value | json}}
@@ -296,10 +320,12 @@

Range picker with custom selection strategy

- - - - + @if (showActions) { + + + + + } diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html index b4b7829c0142..56eb8f7a8fa9 100644 --- a/src/dev-app/dev-app/dev-app-layout.html +++ b/src/dev-app/dev-app/dev-app-layout.html @@ -1,15 +1,15 @@ - - {{navItem.name}} - + @for (navItem of navItems; track navItem) { + {{navItem.name}} + } diff --git a/src/dev-app/drag-drop/drag-drop-demo.html b/src/dev-app/drag-drop/drag-drop-demo.html index 035c0125592e..5c011e0a1042 100644 --- a/src/dev-app/drag-drop/drag-drop-demo.html +++ b/src/dev-app/drag-drop/drag-drop-demo.html @@ -5,12 +5,13 @@

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}}>
-
- + @for (id of ids; track id) { + + +
+
{{_getTitle(id)}}
+
<{{id}}>
+
+ - - - - + + + + + } `, styles: [ diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts index 3a1be014cb8f..6bef62e47864 100644 --- a/src/dev-app/example/example.ts +++ b/src/dev-app/example/example.ts @@ -24,14 +24,18 @@ import { standalone: true, imports: [CommonModule], template: ` -
- {{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

Section 2

This is the content text that makes sense here.

- - Section 3 - Reveal Buttons Below - - - - - + @if (showPanel3) { + + Section 3 + Reveal Buttons Below + @if (showButtons.checked) { + + + + + } + + }

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

+ } diff --git a/src/dev-app/focus-trap/focus-trap-demo.html b/src/dev-app/focus-trap/focus-trap-demo.html index b4f488d6c79c..6a84b7a10728 100644 --- a/src/dev-app/focus-trap/focus-trap-demo.html +++ b/src/dev-app/focus-trap/focus-trap-demo.html @@ -65,8 +65,8 @@ Shadow DOMs - - + + @if (_supportsShadowDom) { @@ -83,9 +83,10 @@ - - Shadow DOM not supported - + } @else { + Shadow DOM not supported + } + diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html index 9bb8317d2ab6..610b1141132f 100644 --- a/src/dev-app/google-map/google-map-demo.html +++ b/src/dev-app/google-map/google-map-demo.html @@ -1,174 +1,198 @@ -
Loading Google Maps API...
-
- - - - - - Testing 1 2 3 - - - - - - - - - - - - - - -

{{display?.lat}}

-

{{display?.lng}}

- -
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
+@if (hasLoaded) { +
+ + + + @for (markerPosition of markerPositions; track markerPosition) { + + } + + Testing 1 2 3 + @if (isPolylineDisplayed) { + + } + @if (isPolygonDisplayed) { + + } + @if (isRectangleDisplayed) { + + } + @if (isCircleDisplayed) { + + } + @if (isGroundOverlayDisplayed) { + + } + @if (isKmlLayerDisplayed) { + + } + @if (isTrafficLayerDisplayed) { + + } + @if (isTransitLayerDisplayed) { + + } + @if (isBicyclingLayerDisplayed) { + + } + @if (directionsResult) { + + } + @if (isHeatmapDisplayed) { + + } + + +

{{display?.lat}}

+

{{display?.lng}}

+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+} @else { +
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 @@ Fixed-height grid list - - {{tile.text}} - + @for (tile of tiles; track tile) { + + {{tile.text}} + + } @@ -72,9 +74,9 @@ Ratio-height grid list - - {{tile.text}} - + @for (tile of tiles; track tile) { + {{tile.text}} + } @@ -87,9 +89,9 @@ - - {{tile.text}} - + @for (tile of tiles; track tile) { + {{tile.text}} + } @@ -102,12 +104,14 @@ Grid list with header - - - info_outline - {{dog.name}} - - + @for (dog of dogs; track dog) { + + + info_outline + {{dog.name}} + + + } @@ -116,14 +120,16 @@ Grid list with footer - - - -

{{dog.name}}

- Human: {{dog.human}} - star_border - - + @for (dog of dogs; track dog) { + + + +

{{dog.name}}

+ Human: {{dog.human}} + star_border + + + } diff --git a/src/dev-app/input/input-demo.html b/src/dev-app/input/input-demo.html index b7b9f5344700..0742fa5c891e 100644 --- a/src/dev-app/input/input-demo.html +++ b/src/dev-app/input/input-demo.html @@ -73,12 +73,12 @@

Regular

Email - - This field is required - - - Please enter a valid email address - + @if (emailFormControl.hasError('required')) { + This field is required + } + @if (emailFormControl.hasError('pattern')) { + Please enter a valid email address + }

@@ -124,7 +124,9 @@

Text

Amount - $ + @if (showPrefix) { + $ + } .00 @@ -140,7 +142,9 @@

Icons

Amount - calendar_today + @if (showPrefix) { + calendar_today + } mode_edit @@ -148,9 +152,11 @@

Icon buttons

Amount - + @if (showPrefix) { + + } @@ -162,9 +168,11 @@

Text & Icons

$ .00 - + @if (showPrefix) { + + } @@ -491,21 +499,23 @@

Textarea

- - {{i+1}} - - - Value - - - - - - - {{item.value}} - + @for (item of items; track item; let i = $index) { + + {{i+1}} + + + Value + + + + + + + {{item.value}} + + } @@ -730,7 +740,9 @@

<textarea> with bindable autosize

- {{option}} + @for (option of options; track option) { + {{option}} + }

@@ -741,7 +753,9 @@

<textarea> with bindable autosize

- {{option}} + @for (option of options; track option) { + {{option}} + }

@@ -776,7 +790,9 @@

<textarea> with bindable autosize

Amount $  - !  + @if (showSecondPrefix) { + !  + } .00 diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html index 2be72e3bbba6..5edc6cdfa7d0 100644 --- a/src/dev-app/list/list-demo.html +++ b/src/dev-app/list/list-demo.html @@ -11,45 +11,57 @@

Normal lists

Items
- - {{item}} - + @for (item of items; track item) { + {{item}} + } - -
{{contact.name}}
-
extra line
-
{{contact.headline}}
- + @for (contact of contacts; track contact) { + +
{{contact.name}}
+ @if (thirdLine) { +
extra line
+ } +
{{contact.headline}}
+ + }
Today
- - Image of {{message.from}} -
{{message.from}}
-
- {{message.subject}} -- - {{message.message}} -
- - + @for (message of messages; track message) { + + Image of {{message.from}} +
{{message.from}}
+
+ {{message.subject}} -- + {{message.message}} +
+ @if (!$last) { + + } + + } - -
{{message.from}}
-
{{message.subject}}
-
{{message.message}}
- + @for (message of messages; track message) { + +
{{message.from}}
+
{{message.subject}}
+
{{message.message}}
+ + } - - {{ link.name }} - - + @for (link of links; track link) { + + {{ link.name }} + + + } @@ -57,61 +69,71 @@

Normal lists

Dense lists

Items
- - {{item}} - + @for (item of items; track item) { + {{item}} + } - -
{{contact.name}}
-
{{contact.headline}}
- + @for (contact of contacts; track contact) { + +
{{contact.name}}
+
{{contact.headline}}
+ + }
Today
- - Image of {{message.from}} -
{{message.from}}
-
{{message.subject}}
-
{{message.message}}
- + @for (message of messages; track message) { + + Image of {{message.from}} +
{{message.from}}
+
{{message.subject}}
+
{{message.message}}
+ + } - - {{ link.name }} - - + @for (link of links; track link) { + + {{ link.name }} + + + }

Nav lists

- - {{ link.name }} - + @for (link of links; track link) { + + {{ link.name }} + + } -
- More info! -
+ @if (infoClicked) { +
More info!
+ } - - folder - {{ link.name }} - + @for (link of links; track link; let last = $last) { + + folder + {{ link.name }} + + }

Action list

- + @for (link of links; track link) { + + }
@@ -228,10 +250,12 @@

Line scenarios

Line alignment

- - {{ link.name }} - Unscoped content - + @for (link of links; track link) { + + {{ link.name }} + Unscoped content + + } diff --git a/src/dev-app/menu/menu-demo.html b/src/dev-app/menu/menu-demo.html index 7638e8012d0e..69338bb190e8 100644 --- a/src/dev-app/menu/menu-demo.html +++ b/src/dev-app/menu/menu-demo.html @@ -9,9 +9,11 @@ - + @for (item of items; track item) { + + }
@@ -24,12 +26,12 @@ - - - - + @for (item of items; track item) { + + @if (!$last) { + + } + }
@@ -95,9 +97,11 @@ - - {{ item.text }} - + @for (item of items; track item) { + + {{ item.text }} + + }
@@ -111,10 +115,12 @@ - + @for (item of iconItems; track item) { + + }
@@ -128,9 +134,9 @@ - + @for (item of items; track item) { + + }
@@ -146,9 +152,9 @@ - + @for (item of items; track item) { + + }
@@ -162,10 +168,12 @@ - + @for (item of iconItems; track item) { + + }
@@ -179,9 +187,9 @@ - + @for (item of items; track item) { + + }
diff --git a/src/dev-app/performance/performance-demo.html b/src/dev-app/performance/performance-demo.html index 73466ba93973..2cfd68c5f975 100644 --- a/src/dev-app/performance/performance-demo.html +++ b/src/dev-app/performance/performance-demo.html @@ -36,10 +36,14 @@ No. {{ item.index }} - + @if (allSamples.length) { + Average render time - - No data yet + +} + @if (!allSamples.length) { + No data yet +} @@ -65,26 +69,32 @@ > +@if (allSamples.length) { +} - - +@if (show) { + + @for (_ of componentArray; track _) { + Input - - + +} + +} diff --git a/src/dev-app/performance/performance-demo.ts b/src/dev-app/performance/performance-demo.ts index 7e0b17bc4b68..612c2dda3dd6 100644 --- a/src/dev-app/performance/performance-demo.ts +++ b/src/dev-app/performance/performance-demo.ts @@ -64,7 +64,7 @@ export class PerformanceDemo implements AfterViewInit { /** The average plus/minus the stdev. */ computedResults = ''; - /** Used in an ngFor to render the desired number of comonents. */ + /** Used in an `@for` to render the desired number of comonents. */ componentArray = [].constructor(this.componentCount); /** The standard deviation of the recorded samples. */ diff --git a/src/dev-app/platform/platform-demo.html b/src/dev-app/platform/platform-demo.html index 79397500200e..012cfba294d4 100644 --- a/src/dev-app/platform/platform-demo.html +++ b/src/dev-app/platform/platform-demo.html @@ -9,5 +9,7 @@

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:

diff --git a/src/dev-app/radio/radio-demo.html b/src/dev-app/radio/radio-demo.html index 2c11becb2327..35a4def520db 100644 --- a/src/dev-app/radio/radio-demo.html +++ b/src/dev-app/radio/radio-demo.html @@ -55,9 +55,11 @@

Favorite Season Example

Dynamic Example with two-way data-binding

- - {{season}} - + @for (season of seasonOptions; track season) { + + {{season}} + + }

Your favorite season is: {{favoriteSeason}}

diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html index 5eee7a9ee2ce..190d3ed68ff7 100644 --- a/src/dev-app/select/select-demo.html +++ b/src/dev-app/select/select-demo.html @@ -13,10 +13,12 @@ None - - {{ drink.viewValue }} - + @for (drink of drinks; track drink; let index = $index) { + + {{ drink.viewValue }} + + } local_drink Pick a drink! @@ -44,9 +46,9 @@

@@ -73,9 +75,11 @@ Pokemon - - {{ creature.viewValue }} - + @for (creature of pokemon; track creature) { + + {{ creature.viewValue }} + + }

Value: {{ currentPokemon }}

@@ -85,7 +89,9 @@

@@ -104,9 +110,9 @@ Digimon None - - {{ creature.viewValue }} - + @for (creature of digimon; track creature) { + {{ creature.viewValue }} + } @@ -124,12 +130,13 @@ Pokemon - - - {{ creature.viewValue }} - - + @for (group of pokemonGroups; track group) { + + @for (creature of group.pokemon; track creature) { + {{ creature.viewValue }} + } + + } @@ -145,9 +152,9 @@ [required]="drinkObjectRequired" [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference" #drinkObjectControl="ngModel"> - - {{ drink.viewValue }} - + @for (drink of drinks; track drink) { + {{ drink.viewValue }} + }

Value: {{ currentDrinkObject | json }}

@@ -174,9 +181,9 @@ Fill None - - {{ creature.viewValue }} - + @for (creature of digimon; track creature) { + {{ creature.viewValue }} + }

@@ -186,9 +193,9 @@ Outline None - - {{ creature.viewValue }} - + @for (creature of digimon; track creature) { + {{ creature.viewValue }} + }

@@ -197,45 +204,52 @@ -
- - formControl + @if (showSelect) { +
+ + formControl - - - Food I would like to eat - - {{ food.viewValue }} - - -

Value: {{ foodControl.value }}

-

Touched: {{ foodControl.touched }}

-

Dirty: {{ foodControl.dirty }}

-

Status: {{ foodControl.status }}

- - - - - -
+ + + Food I would like to eat + + @for (food of foods; track food) { + {{ food.viewValue }} + } + + +

Value: {{ foodControl.value }}

+

Touched: {{ foodControl.touched }}

+

Dirty: {{ foodControl.dirty }}

+

Status: {{ foodControl.status }}

+ + + + + +
+ } -
- - Change event + @if (showSelect) { +
+ + Change event - - - Starter pokemon - - {{ creature.viewValue }} - - - -

Change event value: {{ latestChangeEvent?.value }}

- - -
+ + + Starter pokemon + + @for (creature of pokemon; track creature) { + {{ creature.viewValue }} + } + + +

Change event value: {{ latestChangeEvent?.value }}

+ + +
+ } @@ -342,9 +356,9 @@

Error message, hint, form sumbit

- - This field is required - + @if (selectFormControl.hasError('required')) { + This field is required + } You can pick up your favorite car here @@ -357,9 +371,9 @@

Error message with errorStateMatcher

- - This field is required - + @if (selectFormControl.hasError('required')) { + This field is required + } You can pick up your favorite car here @@ -375,27 +389,27 @@

Error message with errorStateMatcher

Bread - - {{ bread.viewValue }} - + @for (bread of breads; track bread) { + {{ bread.viewValue }} + } Meat - - {{ meat.viewValue }} - + @for (meat of meats; track meat) { + {{ meat.viewValue }} + } Cheese - - {{ cheese.viewValue }} - + @for (cheese of cheeses; track cheese) { + {{ cheese.viewValue }} + }

@@ -403,4 +417,4 @@

Error message with errorStateMatcher

Hide Single-Selection Indicator - \ No newline at end of file + diff --git a/src/dev-app/sidenav/sidenav-demo.html b/src/dev-app/sidenav/sidenav-demo.html index 7df77ef46f58..f7d461e9b827 100644 --- a/src/dev-app/sidenav/sidenav-demo.html +++ b/src/dev-app/sidenav/sidenav-demo.html @@ -1,9 +1,8 @@ - - -
- Header +@if (isLaunched) { +
+ @if (showHeader && !coverHeader) { + Header + } @@ -17,7 +16,9 @@
Mode: {{start.mode}}

-
Filler Content
+ @for (c of fillerContent; track c) { +
Filler Content
+ } -
Filler Content
+ @for (c of fillerContent; track c) { +
Filler Content
+ } - Header + @if (showHeader && coverHeader) { + Header + }
-
Filler Content
+ @for (c of fillerContent; track c) { +
Filler Content
+ }
- Footer + @if (showFooter && coverHeader) { + Footer + } - Footer + @if (showFooter && !coverHeader) { + Footer + }
+} @else { + +} 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 @@

SnackBar demo

-

Show button on snack bar

- - Snack bar action label - - + @if (action) { + + Snack bar action label + + + } @else { +

Show button on snack bar

+ }
-

Auto hide after duration

- - Auto hide duration in ms - - + @if (setAutoHide) { + + Auto hide duration in ms + + + } @else { +

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 @@ Theme - {{theme.name}} + @for (theme of availableThemes; track theme) { + {{theme.name}} + }

@@ -231,17 +233,19 @@

Horizontal Stepper Demo with Text Label

Horizontal Stepper Demo with Templated Label

- - {{step.label}} - - Answer - - -
- - -
- + @for (step of steps; track step) { + + {{step.label}} + + Answer + + +
+ + +
+ + }

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 @@ -
- - - - - - +@for (table of tables; track table) { +
+
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
-
+ + + + +} 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 @@

Basic Example

- - {{video.name}} - + @for (video of videos; track video) { + {{video.name}} + } Unset
diff --git a/src/e2e-app/components/e2e-app/e2e-app.html b/src/e2e-app/components/e2e-app/e2e-app.html index d948ef73a18f..7bfa37644fa5 100644 --- a/src/e2e-app/components/e2e-app/e2e-app.html +++ b/src/e2e-app/components/e2e-app/e2e-app.html @@ -1,9 +1,13 @@
- - {{link.title}} - + @if (showLinks) { + + @for (link of navLinks; track link) { + {{link.title}} + } + + }