Hi,

Using <div *ngIf="crudFormHelper"> wasn't a good idea at the end. I had to face to an other problem.

The best solution is to generate a unique Id for the radio button like that. Tested and aproved.

<formclass="form-inline">

<!--Removed <form> to avoid error on "Enter" key for search -->

<divid="mainForm"class="tab-content card">

<divclass="form-group row">

<divclass="col-2"></div>

</div>

<divclass="form-check">

<inputtype="radio"class="form-check-input"[id]="'materialUnchecked'+uId"[name]="'materialExampleRadios'+uId"

mdbInputDirective>

<labelclass="form-check-label"[for]="'materialUnchecked'+uId">Material unchecked</label>

</div>

<!-- Material checked -->

<divclass="form-check">

<inputtype="radio"class="form-check-input"[id]="'materialChecked'+uId"[name]="'materialExampleRadios'+uId"

checkedmdbInputDirective>

<labelclass="form-check-label"[for]="'materialChecked'+uId">Material checked</label>

</div>

</div>

</form>

In the TS file :

privateuId:string='_'+Math.random().toString(36).substr(2, 9);

Dear @ITSaltel 

I'm marking this ticket as resolved because you have found the answer on your own.

Best Regards,

Damian

A workaround solution was to add a condition who show the component only if we are about to use it. This way, we only have one instance of the component.

<div *ngIf="crudFormHelper">

         <child-with-radio-button></child-with-radio-button>

</div>

Hi,

I finally understand what happens.

The radio button is include in a component. The component is called twice by a parent component. If i remove one or the other, it works. It s related to the Id of the radio button. It have to be unique.

Below are the the two way.

component parent => child 1 => child 2 => child 3=>child with radio button

or

component parent  => child with radio button.

So how can i call a component twice time while having different ID for the radio Buttton. I will have to sort this out. Other way is to clone the child with radio button but this is not good for refactoring.

Dear @ITSaltel 

Unfortunately, I'm unable to reproduce your problem with the latest version of MDB Angular.

I have copied your code to my application and opened the modal.

When I was clicking on the checked one, nothing happens (that's the right behavior).

When I clicked on one of the blank ones, the radio button was selected (again, correct behavior).

Could you please check, if your browser console throws some errors? Maybe try to execute npm install one more time?

Also update your project to the latest MDB Angular version, and check, if this problem still exists.

Best Regards,

Damian