0
votes

afficher un message contextuel lorsque vous cliquez sur Angular 2

Je veux afficher un message contextuel lorsque je clique sur le bouton de sélection comme "vous avez sélectionné cet événement"

comment faire en angulaire 2?

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

javascript typescript angular html

2 commentaires

Publiez le code associé, quelle valeur devez-vous afficher? Y a-t-il d'autres contrôles disponibles dans le html? implémentation de la fonction eventSet ? quel code que vous avez essayé mais qui ne fonctionne pas?

Vérifiez ceci: stackblitz.com/edit/angular-setvalidators-puzd7z

3 Réponses :

0
votes

Vous pouvez utiliser une directive structurelle * ngIf pour créer un popup, mon exemple:

.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%;
  }
}

certains styles:

<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>

0 commentaires

0
votes

Ajoutez l'événement Onclick à la page parent. Pour une fenêtre contextuelle, ajoutez simplement une création modale avec référence à une page distincte afin de personnaliser la fenêtre contextuelle séparément.

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();

Vous pouvez maintenant créer votre page contextuelle nommée 'popuppage' comme vous le souhaitez p >

0 commentaires

0
votes

Peut-être cherchez-vous un grille-pain dans l'écran que vous pouvez ajouter à votre projet en installant une bibliothèque d'interface utilisateur tierce comme primeNg et il est bon à utiliser.

Veuillez regarder ici. https://primefaces.org/primeng/#/toast

0 commentaires