diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index 88c3b1175a8..aa275181a41 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -18,6 +18,8 @@ describe('MatRadio', () => { RadioGroupWithNgModel, RadioGroupWithFormControl, StandaloneRadioButtons, + InterleavedRadioGroup, + TranscludingWrapper ], providers: [ {provide: ViewportRuler, useClass: FakeViewportRuler} @@ -666,6 +668,28 @@ describe('MatRadio', () => { expect(document.activeElement).toBe(inputEl); }); }); + + describe('group interspersed with other tags', () => { + let fixture: ComponentFixture; + let groupDebugElement: DebugElement; + let groupInstance: MatRadioGroup; + let radioDebugElements: DebugElement[]; + let radioInstances: MatRadioButton[]; + + beforeEach(async(() => { + fixture = TestBed.createComponent(InterleavedRadioGroup); + fixture.detectChanges(); + + groupDebugElement = fixture.debugElement.query(By.directive(MatRadioGroup)); + groupInstance = groupDebugElement.injector.get(MatRadioGroup); + radioDebugElements = fixture.debugElement.queryAll(By.directive(MatRadioButton)); + radioInstances = radioDebugElements.map(debugEl => debugEl.componentInstance); + })); + + it('should initialize selection of radios based on model value', () => { + expect(groupInstance.selected).toBe(radioInstances[2]); + }); + }); }); @@ -760,3 +784,29 @@ class RadioGroupWithFormControl { template: `` }) class FocusableRadioButton {} + +@Component({ + template: ` + + + {{option.label}} + + + ` +}) +class InterleavedRadioGroup { + modelValue = 'strawberry'; + options = [ + {label: 'Vanilla', value: 'vanilla'}, + {label: 'Chocolate', value: 'chocolate'}, + {label: 'Strawberry', value: 'strawberry'}, + ]; +} + +@Component({ + selector: 'transcluding-wrapper', + template: ` +
+ ` +}) +class TranscludingWrapper {} diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 9817815779f..f72da0d1194 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -128,7 +128,8 @@ export class MatRadioGroup extends _MatRadioGroupMixinBase @Output() change: EventEmitter = new EventEmitter(); /** Child radio buttons. */ - @ContentChildren(forwardRef(() => MatRadioButton)) _radios: QueryList; + @ContentChildren(forwardRef(() => MatRadioButton), { descendants: true }) + _radios: QueryList; /** Name of the radio button group. All radio buttons inside this group will use this name. */ @Input()