Angular 2 alert displays only once

Question

I have an angular 2 forgot password component. The component asks the server to generate an SMS verification code and alerts the user when the SMS message is sent. After the service response is received an alert is displayed saying that the code is delivered to the user's mobile phone using *ngIf.

However, when the user asks for a second code, the alert (ng2-bootstrap) does not pop up.

Any help is kindly appreciated.

@Component({     
   templateUrl:'forgot-password.component.html',
   styleUrls:['../../res/styles/login.component.css'],
   providers:[{provide:AlertConfig, useFactory:getAlertConfig}]

})
export class ForgotPasswordComponent implements OnInit{


   model:any={};
   returnUrl:string;
   smsCodeResponse:SMSVerificationInfo;
   errorMessage:string;
   activeVerificationCodeSent:boolean;  
   constructor(
       private route:ActivatedRoute, 
       private router:Router, 
       private authenticationService:AuthenticationService
   ){}


   requestVerificationCode(){
      this.authenticationService.requestSMSCode(this.model.username)
      .subscribe(
          (s)=>this.smsCodeResponse=s,
          (e)=>this.errorMessage=e,
          ()=> {
              this.activeVerificationCodeSent=this.smsCodeResponse.aktifmi)
          };               
   }

}

template

<div *ngIf="activeVerificationCodeSent">
   <alert type="danger" dismissible="true">
      <strong>Bilgi</strong> Doğrulama Kodu telefonunuza gonderildi.
   </alert>
</div>

Answer 1

You should reset the activeVerificationCodeSent to false after the dialog get dismissed. I expect that the <alert> gets dismissed, but that you do not reset the state. You should do something like this inside your template:

<div *ngIf="activeVerificationCodeSent">**
   <alert type="danger" [dismissible]="true" (onClose)="onAlertClose()">
       <strong>Bilgi</strong> Doğrulama Kodu telefonunuza gonderildi.
   </alert>
</div>

And add a function in your ForgotPasswordComponent:

onAlertClose(): void {
   this.activeVerificationCodeSent = false;
}