docs(checkbox): add indeterminate and disabled checkbox examples #18987
Conversation
livvielin
commented
Apr 4, 2020
livvielin
commented
googlebot
added
the
cla: yes
| [(ngModel)]="task.completed" | ||
| [checked]="allComplete()" | ||
| [indeterminate]="someComplete()" | ||
| (change)="setAll($event.checked)"> |
There was a problem hiding this comment.
Since we're using ngModel above, it might be better to use the ngModelChange event here for consistency.
There was a problem hiding this comment.
This doesn't quite work, since the ngModel was task.completed and it's not looking at the right object. Instead, I removed ngModel and use change. Does that seem ok?
| if (this.task.subtasks == null) { | ||
| return false; | ||
| } | ||
| return this.task.subtasks.filter(t => t.completed).length > 0 && !this.allComplete(); |
There was a problem hiding this comment.
This is definitely the cleaner way to do it, but I'm not sure whether it's the best in terms of performance, because this method and allComplete will be invoked on every change detection run. It might be better to have this in a boolean property and recalculate it once when a value has changed.
There was a problem hiding this comment.
Updated to make allComplete a boolean, and changed the method to updateAllComplete, which sets allComplete when subtasks change and when calling setAll. Was that along the lines of what you were thinking?
src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.css
Outdated
Show resolved
Hide resolved
src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
Outdated
Show resolved
Hide resolved
| [(ngModel)]="task.completed" | ||
| [checked]="allComplete()" | ||
| [indeterminate]="someComplete()" | ||
| (change)="setAll($event.checked)"> |
There was a problem hiding this comment.
This doesn't quite work, since the ngModel was task.completed and it's not looking at the right object. Instead, I removed ngModel and use change. Does that seem ok?
src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.css
Outdated
Show resolved
Hide resolved
src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
Outdated
Show resolved
Hide resolved
| if (this.task.subtasks == null) { | ||
| return false; | ||
| } | ||
| return this.task.subtasks.filter(t => t.completed).length > 0 && !this.allComplete(); |
There was a problem hiding this comment.
Updated to make allComplete a boolean, and changed the method to updateAllComplete, which sets allComplete when subtasks change and when calling setAll. Was that along the lines of what you were thinking?
crisbeto
added
docs
) * docs(checkbox): add indeterminate and disabled checkbox examples * Make fixes (cherry picked from commit 68eaaf6)
…ular#18987) * docs(checkbox): add indeterminate and disabled checkbox examples * Make fixes
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
