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?

ForrestLin

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