I want to show a popup message when i click on select button like "you have selected this event"

how to do in angular 2?

<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
 SELECT
</button>

I want to show a popup message when i click on select button like "you have selected this event"

how to do in angular 2?

<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
 SELECT
</button>

• javascript
• html
• angular
• typescript

• 2 Post the related code, which value do you to show? Is there any other controls available in the html? implementation of eventSet function? what code that you have tried but not working? – Prashant Pimpale Commented Jan 28, 2020 at 10:54
• Check this:stackblitz./edit/angular-setvalidators-puzd7z – Prashant Pimpale Commented Jan 28, 2020 at 11:16

3 Answers 3

You can use a structural directive *ngIf to create popup, my example:

<button type="button"(click)="popup = true">
 SELECT
</button>


<div class="overlay" *ngIf="popup">
    <div class="popup">
        <h2>Here i am</h2>
        <a class="close" (click)="popup = false">&times;</a>
        <div class="content">
        you have selected this event
        </div>
    </div>
</div>

some styles:

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
visibility: visible;
  opacity: 1;
}


.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
  cursor: pointer;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){

  .popup{
    width: 70%;
  }
}

https://stackblitz./edit/angular-g4rdha?file=src%2Fapp%2Fapp.ponent.ts

Hope it helps!

Add Onclick event to parent page. For popup just add a modal create with reference of a seperate page in order to customize pop up seperately.

let test= this.modalCtrl.create('popuppage',
{
    message: 'message',
    (Enter all parameters you want to pass to the pop up page)
}
,{cssClass:'settings-modal'});
 test.present();

Now you can create your pop up page named 'popuppage'as you require

May be you are looking for toaster in the screen which you can add to your project by installing third party UI library like primeNg and it is good to use.

Please look it here. https://primefaces/primeng/#/toast