Skip to content

Commit 10c6e60

Browse files
devversiondevversion
committed
build: make dev-app compatible with ivy template type checking
1 parent bbf8528 commit 10c6e60

File tree

22 files changed

+103
-72
lines changed

22 files changed

+103
-72
lines changed

‎src/dev-app/BUILD.bazel

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ ng_module(
2727
"system-rxjs-operators.ts",
2828
],
2929
),
30+
# TODO(devversion): Temporarily disabled due to an Ivy template type checking bug
31+
# that is surfaced in the "MdcMenu" demo. The issue is tracked with: COMP-173
32+
type_check = False,
3033
assets = glob(["**/*.html"]) + [
3134
":dev_app_scss",
3235
":theme",

‎src/dev-app/badge/badge-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h3>Text</h3>
66
Hello
77
</span>
88

9-
<span [matBadge]="11111" matBadgeOverlap="false">
9+
<span matBadge="11111" matBadgeOverlap="false">
1010
Hello
1111
</span>
1212

‎src/dev-app/checkbox/checkbox-demo.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
import {Component, Directive} from '@angular/core';
1010
import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
11+
import {ThemePalette} from '@angular/material/core';
1112
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
1213

1314

@@ -96,20 +97,20 @@ export class CheckboxDemo {
9697
isIndeterminate: boolean = false;
9798
isChecked: boolean = false;
9899
isDisabled: boolean = false;
99-
labelPosition: string = 'after';
100+
labelPosition: 'before'|'after' = 'after';
100101
useAlternativeColor: boolean = false;
101102

102103
demoRequired = false;
103104
demoLabelAfter = false;
104105
demoChecked = false;
105106
demoDisabled = false;
106107
demoIndeterminate = false;
107-
demoLabel = null;
108-
demoLabelledBy = null;
109-
demoId = null;
110-
demoName = null;
111-
demoValue = null;
112-
demoColor = 'primary';
108+
demoLabel: string;
109+
demoLabelledBy: string;
110+
demoId: string;
111+
demoName: string;
112+
demoValue: string;
113+
demoColor: ThemePalette = 'primary';
113114
demoDisableRipple = false;
114115
demoHideLabel = false;
115116

‎src/dev-app/checkbox/nested-checklist.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ <h2>Tasks</h2>
33
<li *ngFor="let task of tasks">
44
<mat-checkbox [(ngModel)]="task.completed"
55
[checked]="allComplete(task)"
6-
[indeterminate]="someComplete(task.subtasks)"
7-
(change)="setAllCompleted(task.subtasks, $event.checked)">
6+
[indeterminate]="someComplete(task.subtasks!)"
7+
(change)="setAllCompleted(task.subtasks!, $event.checked)">
88
<h3>{{task.name}}</h3>
99
</mat-checkbox>
1010
<ul>
11-
<li *ngFor="let subtask of task.subtasks">
11+
<li *ngFor="let subtask of task.subtasks!">
1212
<mat-checkbox [(ngModel)]="subtask.completed">
1313
{{subtask.name}}
1414
</mat-checkbox>

‎src/dev-app/chips/chips-demo.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface DemoColor {
3030
export class ChipsDemo {
3131
tabIndex = 0;
3232
visible = true;
33-
color = '';
33+
color: ThemePalette = undefined;
3434
selectable = true;
3535
removable = true;
3636
addOnBlur = true;

‎src/dev-app/connected-overlay/connected-overlay-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ <h2>Options</h2>
9797
<button mat-raised-button
9898
cdkOverlayOrigin
9999
type="button"
100-
[disabled]="overlayRef"
100+
[disabled]="!!overlayRef"
101101
(click)="openWithConfig()">Open</button>
102102
</div>
103103

‎src/dev-app/datepicker/datepicker-demo.html

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h2>Result</h2>
5151
[(ngModel)]="date"
5252
[min]="minDate"
5353
[max]="maxDate"
54-
[matDatepickerFilter]="filterOdd ? dateFilter : null"
54+
[matDatepickerFilter]="filterOdd ? dateFilter : undefined"
5555
[disabled]="inputDisabled"
5656
(dateInput)="onDateInput($event)"
5757
(dateChange)="onDateChange($event)">
@@ -81,7 +81,7 @@ <h2>Result</h2>
8181
[min]="minDate"
8282
[max]="maxDate"
8383
[disabled]="inputDisabled"
84-
[matDatepickerFilter]="filterOdd ? dateFilter : null"
84+
[matDatepickerFilter]="filterOdd ? dateFilter : undefined"
8585
placeholder="Pick a date">
8686
<mat-datepicker-toggle [for]="resultPicker2"></mat-datepicker-toggle>
8787
<mat-datepicker
@@ -99,7 +99,7 @@ <h2>Input disabled datepicker</h2>
9999
<mat-form-field>
100100
<mat-label>Input disabled</mat-label>
101101
<input matInput [matDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
102-
[matDatepickerFilter]="filterOdd ? dateFilter : null" disabled>
102+
[matDatepickerFilter]="filterOdd ? dateFilter : undefined" disabled>
103103
<mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
104104
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
105105
</mat-form-field>
@@ -111,7 +111,7 @@ <h2>Input disabled via FormControl</h2>
111111
<mat-form-field>
112112
<mat-label>FormControl disabled</mat-label>
113113
<input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
114-
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
114+
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
115115
<mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
116116
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
117117
</mat-form-field>
@@ -127,7 +127,7 @@ <h2>Input disabled, datepicker popup enabled</h2>
127127
<mat-form-field>
128128
<mat-label>Input disabled, datepicker enabled</mat-label>
129129
<input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
130-
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
130+
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
131131
<mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
132132
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
133133
</mat-form-field>
@@ -138,8 +138,14 @@ <h2>Datepicker with value property binding</h2>
138138
<mat-datepicker-toggle [for]="datePicker4"></mat-datepicker-toggle>
139139
<mat-form-field>
140140
<mat-label>Value binding</mat-label>
141-
<input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
142-
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
141+
<!--
142+
TODO for reviewer: Angular sets the inputs for both directives on the
143+
input element here. e.g. [value] is set for MatInput and MatDatepicker.
144+
MatInput#value expects a string whereas MatDatepicker#value expects a date.
145+
This breaks strict template type checking. What should we do here?
146+
-->
147+
<input matInput [matDatepicker]="datePicker4" [value]="$any(date)" [min]="minDate"
148+
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
143149
<mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt"
144150
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
145151
</mat-form-field>

‎src/dev-app/datepicker/datepicker-demo.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,16 @@ export class DatepickerDemo {
4949

5050
dateCtrl = new FormControl();
5151

52-
dateFilter =
53-
(date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
54-
5552
onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
5653
onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
5754

5855
// pass custom header component type as input
5956
customHeader = CustomHeader;
6057
customHeaderNgContent = CustomHeaderNgContent;
58+
59+
dateFilter(date: Date|null) {
60+
return !!date && !(date.getFullYear() % 2) && !!(date.getMonth() % 2) && !(date.getDate() % 2);
61+
}
6162
}
6263

6364
// Custom header component for datepicker

‎src/dev-app/expansion/expansion-demo.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@
77
*/
88

99
import {Component, ViewChild} from '@angular/core';
10-
import {MatAccordion} from '@angular/material/expansion';
10+
import {
11+
MatAccordion,
12+
MatAccordionDisplayMode,
13+
MatAccordionTogglePosition
14+
} from '@angular/material/expansion';
1115

1216

1317
@Component({
@@ -19,12 +23,12 @@ import {MatAccordion} from '@angular/material/expansion';
1923
export class ExpansionDemo {
2024
@ViewChild(MatAccordion, {static: false}) accordion: MatAccordion;
2125

22-
displayMode = 'default';
26+
displayMode: MatAccordionDisplayMode = 'default';
2327
multi = false;
2428
hideToggle = false;
2529
disabled = false;
2630
showPanel3 = true;
27-
togglePosition = 'after';
31+
togglePosition: MatAccordionTogglePosition = 'after';
2832
expandedHeight: string;
2933
collapsedHeight: string;
3034
events: string[] = [];

‎src/dev-app/grid-list/grid-list-demo.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export class GridListDemo {
3535
basicRowHeight = 80;
3636
fixedCols = 4;
3737
fixedRowHeight = 100;
38-
ratioGutter = 1;
38+
ratioGutter = '1px';
3939
fitListHeight = '400px';
4040
ratio = '4:1';
4141

‎src/dev-app/input/input-demo.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ <h4>Textarea</h4>
362362
Both:
363363
<mat-form-field class="demo-text-align-end">
364364
<mat-label>Email address</mat-label>
365-
<input matInput #email value="angular-core">
365+
<input matInput #email="matInput" value="angular-core">
366366
<span matPrefix><mat-icon [class.primary]="email.focused">email</mat-icon>&nbsp;</span>
367367
<span matSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
368368
</mat-form-field>
@@ -550,9 +550,9 @@ <h3>Regular &lt;textarea&gt; with maxRows and minRows</h3>
550550
</div>
551551
<textarea class="demo-textarea"
552552
cdkTextareaAutosize
553-
[cdkAutosizeMinRows]="minRows.value"
554-
[cdkAutosizeMaxRows]="maxRows.value"></textarea>
555-
<button type="button" (click)="minRows.value = minRows.value - 1">Decrement minRows</button>
553+
[cdkAutosizeMinRows]="parseNumber(minRows.value)"
554+
[cdkAutosizeMaxRows]="parseNumber(maxRows.value)"></textarea>
555+
<button type="button" (click)="minRows.value = parseNumber(minRows.value) - 1">Decrement minRows</button>
556556

557557
<h3>&lt;textarea&gt; with mat-form-field</h3>
558558
<div>

‎src/dev-app/input/input-demo.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {ChangeDetectionStrategy, Component} from '@angular/core';
1010
import {FormControl, Validators} from '@angular/forms';
11-
import {ErrorStateMatcher} from '@angular/material/core';
11+
import {ErrorStateMatcher, FloatLabelType} from '@angular/material/core';
1212

1313

1414
let max = 5;
@@ -23,7 +23,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
2323
styleUrls: ['input-demo.css'],
2424
})
2525
export class InputDemo {
26-
floatingLabel = 'auto';
26+
floatingLabel: FloatLabelType = 'auto';
2727
color: boolean;
2828
requiredField: boolean;
2929
hideRequiredMarker: boolean;
@@ -92,4 +92,8 @@ export class InputDemo {
9292
this.placeholderTestControl.markAsUntouched() :
9393
this.placeholderTestControl.markAsTouched();
9494
}
95+
96+
parseNumber(value: string): number {
97+
return Number(value);
98+
}
9599
}

‎src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
import {Component, Directive} from '@angular/core';
1010
import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
11+
import {ThemePalette} from '@angular/material/core';
1112
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
1213

1314

@@ -97,20 +98,20 @@ export class MdcCheckboxDemo {
9798
isIndeterminate: boolean = false;
9899
isChecked: boolean = false;
99100
isDisabled: boolean = false;
100-
labelPosition: string = 'after';
101+
labelPosition: 'before'|'after' = 'after';
101102
useAlternativeColor: boolean = false;
102103

103104
demoRequired = false;
104105
demoLabelAfter = false;
105106
demoChecked = false;
106107
demoDisabled = false;
107108
demoIndeterminate = false;
108-
demoLabel = null;
109-
demoLabelledBy = null;
110-
demoId = null;
111-
demoName = null;
112-
demoValue = null;
113-
demoColor = 'primary';
109+
demoLabel: string;
110+
demoLabelledBy: string;
111+
demoId: string;
112+
demoName: string;
113+
demoValue: string;
114+
demoColor: ThemePalette = 'primary';
114115
demoDisableRipple = false;
115116
demoHideLabel = false;
116117

‎src/dev-app/mdc-checkbox/nested-checklist.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ <h2>Tasks</h2>
33
<li *ngFor="let task of tasks">
44
<mat-checkbox [(ngModel)]="task.completed"
55
[checked]="allComplete(task)"
6-
[indeterminate]="someComplete(task.subtasks)"
7-
(change)="setAllCompleted(task.subtasks, $event.checked)">
6+
[indeterminate]="someComplete(task.subtasks!)"
7+
(change)="setAllCompleted(task.subtasks!, $event.checked)">
88
<h3>{{task.name}}</h3>
99
</mat-checkbox>
1010
<ul>
11-
<li *ngFor="let subtask of task.subtasks">
11+
<li *ngFor="let subtask of task.subtasks!">
1212
<mat-checkbox [(ngModel)]="subtask.completed">
1313
{{subtask.name}}
1414
</mat-checkbox>

‎src/dev-app/progress-bar/progress-bar-demo.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import {Component} from '@angular/core';
10+
import {ThemePalette} from '@angular/material/core';
1011

1112

1213
// TODO(josephperrott): Add an automatically filling example progress bar.
@@ -18,7 +19,7 @@ import {Component} from '@angular/core';
1819
styleUrls: ['progress-bar-demo.css'],
1920
})
2021
export class ProgressBarDemo {
21-
color: string = 'primary';
22+
color: ThemePalette = 'primary';
2223
determinateProgressValue: number = 30;
2324
determinateAnimationEndValue: number;
2425
bufferAnimationEndValue: number;

‎src/dev-app/progress-spinner/progress-spinner-demo.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import {Component} from '@angular/core';
10+
import {ThemePalette} from '@angular/material/core';
1011

1112

1213
@Component({
@@ -17,7 +18,7 @@ import {Component} from '@angular/core';
1718
})
1819
export class ProgressSpinnerDemo {
1920
progressValue = 60;
20-
color = 'primary';
21+
color: ThemePalette = 'primary';
2122
isDeterminate = true;
2223

2324
step(val: number) {

‎src/dev-app/radio/radio-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h1>Dynamic Example</h1>
4444
name="my_options"
4545
[disabled]="isDisabled"
4646
[required]="isRequired"
47-
[labelPosition]="isAlignEnd ? 'end' : 'start'">
47+
[labelPosition]="isAlignEnd ? 'before' : 'after'">
4848
<mat-radio-button value="option_1">Option 1</mat-radio-button>
4949
<mat-radio-button value="option_2">Option 2</mat-radio-button>
5050
<mat-radio-button value="option_3">Option 3</mat-radio-button>

0 commit comments

Comments
 (0)