Skip to content

Commit d3f954f

Browse files
committed
fix(checkbox): margin for empty checkboxes incorrectly added
With angular#2121 the margin will be removed for checkboxes that don't have any label set. A problem is that the Checkbox uses the OnPush change detection strategy and therefore the checkbox is not able to detect any delayed / async label change. This means that checkboxes that set their label from an async binding will not have any margin until the users clicks on the checkbox. Using the `cdkObserveContent` seems to be an elegant approach when using the OnPush strategy. The `:empty` CSS selector would be more elegant but it's very sensitive about whitespaces and therefore it doesn't work properly. Fixes angular#4720
1 parent 3569805 commit d3f954f

File tree

3 files changed

+8
-12
lines changed

3 files changed

+8
-12
lines changed

src/lib/checkbox/checkbox.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<label class="mat-checkbox-layout" #label>
22
<div class="mat-checkbox-inner-container"
3-
[class.mat-checkbox-inner-container-no-side-margin]="!_hasLabel()">
3+
[class.mat-checkbox-inner-container-no-side-margin]="!_hasLabel">
44
<input #input
55
class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
66
[id]="inputId"
@@ -35,7 +35,8 @@
3535
<div class="mat-checkbox-mixedmark"></div>
3636
</div>
3737
</div>
38-
<span class="mat-checkbox-label" #labelWrapper>
38+
<span class="mat-checkbox-label" #userLabel
39+
(cdkObserveContent)="_hasLabel = !!userLabel.textContent.trim()">
3940
<ng-content></ng-content>
4041
</span>
4142
</label>

src/lib/checkbox/checkbox.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -158,17 +158,12 @@ export class MdCheckbox extends _MdCheckboxMixinBase
158158
/** The native `<input type="checkbox"> element */
159159
@ViewChild('input') _inputElement: ElementRef;
160160

161-
@ViewChild('labelWrapper') _labelWrapper: ElementRef;
162-
163-
/** Whether the checkbox has label */
164-
_hasLabel(): boolean {
165-
const labelText = this._labelWrapper.nativeElement.textContent || '';
166-
return !!labelText.trim().length;
167-
}
168-
169161
/** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
170162
@ViewChild(MdRipple) _ripple: MdRipple;
171163

164+
/** Whether the checkbox has a label set or not. */
165+
_hasLabel: boolean = false;
166+
172167
/**
173168
* Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
174169
* @docs-private

src/lib/checkbox/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {NgModule} from '@angular/core';
22
import {CommonModule} from '@angular/common';
3-
import {MdRippleModule, MdCommonModule, FocusOriginMonitor} from '../core';
3+
import {MdRippleModule, MdCommonModule, FocusOriginMonitor, ObserveContentModule} from '../core';
44
import {MdCheckbox} from './checkbox';
55

66

77
@NgModule({
8-
imports: [CommonModule, MdRippleModule, MdCommonModule],
8+
imports: [CommonModule, MdRippleModule, MdCommonModule, ObserveContentModule],
99
exports: [MdCheckbox, MdCommonModule],
1010
declarations: [MdCheckbox],
1111
providers: [FocusOriginMonitor]

0 commit comments

Comments
 (0)