So I have a login page with a submit button that loads a new page as soon as the username and password are correct. This works fine, but at the next page I want a wizard popping up.
I am using Angular + VMWare Clarity.
The problem is, if I put :
<button [disabled]="loading" class="btn btn-primary" (click)="wizard.open()">
Login
</button>
this redirects to the wizard without doing the authentication first. So it doesn't matter then if the username and password are incorrect.
Do you know of any other way to pop up the wizard after the form submitted correctly? Or if I can somehow make the wizard pop up after the form submit without needing a button function for it?
So your (click)="wizard.open()" event handler fires when the button is clicked, not after the form has responded. This isn't specific to Clarity, just to the logical ordering of events in JavaScript. Clicks will almost always fire before a response is received, so you want to handle opening the wizard when the response is received.
There are two basic ways. 1) Setting open state in the input binding or 2) getting the wizard component and programmatically calling the open method.
Your wizard should have a [(clrWizardOpen)] binding set to a value, like <clr-wizard [(clrWizardOpen)]="wizardState">. When you are handling your response, you can set this.wizardState = true to trigger the wizard to open.
In your controller, you can use @ViewChild(ClrWizard) wizard: ClrWizard; to set a property on your controller that has a reference to the wizard. Then in your response handler, you could do this.wizard.open() to open it.