Clarity: Modal Dialog not opening when using Asp.Net Core 2 Angular SPA Template

[luis-cortina]

Hi:
I'm heavily using clarity suite and I want to integrate it with the new Angular Spa Template in DotnetCore 2. I've created a sample app I want to share for troubleshooting purposes. I've got through a lot of hoops, but now I can't figure this one out. When I click on the button, the modal doesn't open.

https://github.com/luis-cortina/AspNetCoreAppTemplate/tree/feature/adding-clarityng

Please help?

Luis

[mathisscott]

@youdz
Do you know of someone on the team who might be able to help figure this out?

[jeeyun]

Hi @luis-cortina, unfortunately none of us in the team have any experience with using ASP.NET to build SPA apps. Hoping maybe someone in the community has some experiences and will respond to you here.

But I did see a thread on Stack Overflow, which seems to suggest that others are experiencing issues with Angular two-way binding in ASP.NET:
https://stackoverflow.com/questions/44465072/ngmodel-2-way-data-binding-not-working-with-visual-studio-2017-angular-2-single

Unfortunately there isn't an accepted answer, but maybe you can try the suggested answers to see if either would help resolve your problem?

1. Import ClarityModule in AppModuleShared instead or
2. Break up the two-way binding by doing the below.

Change:

<clr-modal [(clrModalOpen)]="closable" [clrModalClosable]="false">
   ...
</clr-modal>

To:

<clr-modal [clrModalOpen]="closable" (clrModalOpenChange)="$event.value" [clrModalClosable]="false">
   ...
</clr-modal>

[luis-cortina]

@youdz
That didn't do the trick. I tried using model binding and worked correctly, so it doesn't look like that's the issue.

I saw in the docs there's an explicit open() method for the modal. How do I get the ref from the modal to open it?
Any other tips on how to debug this? I already checked and the required js is being loaded.

Thanks,

Luis

[mathisscott]

To grab the ref from the modal you usually do something like this...

<clr-modal #yourRefHere ...>

...and then in your host component you have something like this...

@Component {
  ...
}
class yourHostComponentThatHasTheModalInItsTemplate {
  ...
  @ViewChild("yourRefHere") thisIsYourModal;
  ...
  // then later in your code you would call
  this.thisIsYourModal.open();
}

This is pretty basic Angular stuff. You can read more on their docs.

https://angular.io/guide/template-syntax#template-reference-variables--var-

[youdz]

Actually, in @mathisscott's answer, replace @ContentChild("yourRefHere") by @ViewChild("yourRefHere"). The modal is in the view of your component, not projected into it. But he's right, that's the main way to grab a reference to the modal.

[mathisscott]

What do you mean? It says ViewChild already. 😝

[luis-cortina]

Hi guys, you're awesome, this one was my mistake.
It turns out this template comes with bootstrap pre-bundled in the webpack.vendor.config,js, and those styles were messing with the clarity ones. I removed it and it works fine now.

Since I still plan to use that combo (Clarity+Ng2+AspNetCore), I'm going to keep that repo alive so poeple can use it as reference if they want.

Thanks,

Luis

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.