Problem bind [(ngModel)] using material <md-radio-group> component with flexLayout

[GustavoCostaW]

Hey people,

I'm using
Angular Material beta 7
Angular Flex Layout beta 8

I have a component with the following code snippet

{{question.answer}}
<md-radio-group [(ngModel)]="question.answer" name="question{{i}}">
               <div id="problem" *ngFor="let alternative of question.alternatives" fxLayout>
                  <md-radio-button [value]="alternative.id">
                    {{alternative.title}}
                  </md-radio-button>
                  <div>remove<div>
                </div>
</md-radio-group>

if the div#problem has fxLayout directive the [(ngModel)]="question.answer" in md-radio-group doesn't bind when the component is started, see below behavior when div#problem does not have fxLayout directive:

But if I add fxLayout directive, the bind does not work when the component is started.

Demo: http://plnkr.co/edit/k3xXPY?p=preview
Simulate the behavior when you remove fxLayout in div#problem

Is the directive blocking the Angular Material of changing css?

[ThomasBurleson]

@GustavoCostaW - please provide a Plunkr demo or source code to reproduce this issue.

[GustavoCostaW]

@ThomasBurleson done! Simulate the behavior when you remove fxLayout in div#problem

http://plnkr.co/edit/k3xXPY?p=preview

[ThomasBurleson]

@GustavoCostaW - this is not a @angular/flex-layout issue.

Here is a Plunkr Demo without any fxLayout directives.

Notice that by simply adding a class="" to the radio button div parent then the selected button highlight at startup fails:

This is some weird issue with @angular/material.

[ThomasBurleson]

Closing as not an @angular/flex-layout issue. Please report this issue on the @angular/material repository.

[GustavoCostaW]

Hey @ThomasBurleson, thank you for the reply! I will make this :-)

[ThomasBurleson]

Reopening:

@ThomasBurleson could you take a look at this plunker?

http://plnkr.co/edit/sVbxtBHtaXS9mh9ZC4ns?p=preview

It distills the problem down to a bare minimum. You can see on line 94 of main.ts that importing FlexLayoutModule causes the issue.

[Splaktar]

Could this be related to #127?

[ThomasBurleson]

This Plunkr with latest build of FlexLayoutModule and latest release of Material shows everything working properly.

Closing as not-an-issue.

[etiennecrb]

Hello!
I'm sorry but for me, the Plunkr shows the bug: it works only when you remove the class OR you remove FlexLayoutModule.

Very weird bug!

[ThomasBurleson]

@etiennecrb - indeed. I am inclined to think this is an @angular/material2 bug. Still researching...

[etiennecrb]

Adding { descendants: true } in @ContentChildren of MdRadioGroup makes things work.
When FlexLayoutModule is in the project, it appends ng-reflect-class-base on the <div> with the *ngFor and the class attribute. I'm not sure why FlexLayout makes that happen neither how it makes @ContentChildren fail...

[ThomasBurleson]

Oh that is interesting.

The Flex-API defers all class active to the Angular Core ClassDirective; not sure why the core directive adds ng-reflect-class-base.

Can you report these findings as an issue with RadioGroup on the @angular/material2 repos ?

[ThomasBurleson]

Closing this as not-an-issue for Flex-Layout.

[epere4]

Was any bug in @angular/material2 opened for this in the end?

[etiennecrb]

No, I haven't opened an issue yet.

[ThomasBurleson]

@epere4, @etiennecrb - This has NOT been fixed in the latest Material2 release.

[ThomasBurleson]

After discussions with Angular material team, we are reopening for further investigation.

[ThomasBurleson]

Refs #394 - May be fixed with removal of [class] selector.

[ThomasBurleson]

      <md-radio-group [(ngModel)]="question.answer" style="height:200px" name="answer">
        <div *ngFor="let alternative of question.alternatives" id="problem">
          <md-radio-button [value]="alternative.id"> {{alternative.title}} </md-radio-button>
          <div>remove</div>
        </div>
      </md-radio-group>

creates

---

<md-radio-group [(ngModel)]="question.answer" style="height:200px" name="answer">
  <div id="problem" fxLayout *ngFor="let alternative of question.alternatives" >
    <md-radio-button [value]="alternative.id"> {{alternative.title}} </md-radio-button>
    <div>remove</div>
  </div>
</md-radio-group>

creates

@devversion - something is interfering with mat-radio-checked being assigned as an additional class.

[CaerusKaru]

Is this still an issue?

[CaerusKaru]

Closing since this hasn't been updated in a while. We can re-open if a followup is provided confirming this is still an issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}