Cannot open calcite-alert again after closing it

[ForrestLin]

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

How to re-use calcite-alert?

[KittyHurley · Accepted solution]

@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 · Accepted solution]

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