Cannot open calcite-alert again after closing it

ForrestLin — Mon, 24 Jul 2023 17:52:13 GMT

I cannot open calcite-alert again after closing it by re-setting open = true.

How to re-use calcite-alert?

Re: Cannot open calcite-alert again after closing it

KittyHurley — Tue, 25 Jul 2023 14:55:57 GMT

@ForrestLin Can you share a Codepen with the behavior mentioned? Here's an example of toggling an Alert with a Button click event, which shows how to toggle the Alert's "open" attribute.

ForrestLin — Tue, 25 Jul 2023 16:20:38 GMT

Hi Kitty, Thanks for your help. The issue is fixed by calling toggleAttribute("open") in Angular.

Here is my Alert Angular Component:

alert.component.html

---------------------------------

<calcite-alert [icon]="alert.icon" [kind]="alert. Kind"

[label]="alert. Label" #alertNode>

<div slot="title">{{alert.title}}</div>

<div slot="message">{{alert. Message}}</div>

</calcite-alert>

------------------------------------------------------------------------------------------------

alert.component.ts

----------------------------

@Component({

selector: 'app-alert',

templateUrl: './alert.component.html',

styleUrls: ['./alert.component.css']

})

export class AlertComponent implements OnInit, OnDestroy {

@ViewChild('alertNode', { static: true })

private _alertEl!: ElementRef;

alert: Alert = {

........................

};

public openAlert() {

if (!this._alertEl.nativeElement.open) {

this._alertEl.nativeElement.toggleAttribute("open");

}

Forrest