Okno modalne z informacją

Hej,

Piszę aplikację w Angularze i chciałabym, żeby po naciśnięciu przycisku pokazywało mi się okno z informacją. Przy implementacji tego komunikatu ma być też użyta zmienna.

Na przykład:

"Twoje imie to:" i tutaj zmienna na przykład this.imie

W jaki sposób mogę to zrobić?

Z góry dziękuję za odpowiedź

poszukaj czegoś w googlach na zasadzie 'angular open modal' a potem rozbierz to na czynniki pierwsze i naucz się czego jeszcze nie umiesz
Najszybciej będzie zastosować np angular material

https://material.angular.io/components/dialog/overview
albo tutaj też coś jest
https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box

Ogólnie chodzi o to żebyś nauczyła się korzystać z google itp., znajomość angielskiego i google to najważniejsza umięjętność dla programisty

Myślę ze najprościej byłoby sobie zrobić własny komponent który będzie brał jako Input Twoja zmienna a wykorzysta dialoga który jest w HTMLu już chwilę dobrą.

https://angular.io/api/core/Input
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Ewentualnie każda porządna biblioteka komponentów będzie miała swoją interpretację modala.

https://primeng.org/dialog

Mam nadzieję, że dość wyczerpująco

To zależy czy chcesz pokazać zwykłe okienko, czy okienko modalne. Modalne to takie które blokuje całą interakcję pod nim - czyli wtedy można klikać tylko w tym okienku. Jeśli otworzysz zwykłe okienko (nie modalne), to nadal możesz klikać po całym UI pod spodem.

Riddle napisał(a):

To zależy czy chcesz pokazać zwykłe okienko, czy okienko modalne. Modalne to takie które blokuje całą interakcję pod nim - czyli wtedy można klikać tylko w tym okienku. Jeśli otworzysz zwykłe okienko (nie modalne), to nadal możesz klikać po całym UI pod spodem.

Chodzi mi o okienko modalne

1. Dodaj do każdego elementu HTML który posiada własność "onClick" pole "domyslnyOnClick" - niech wartością będzie to co ma być robione. 2) zbierz wszystkie elementy w tablicę. Utwórz funkcję która w zależności od parametru przekazanego przejedzie po wszystkich elementach tablicy i ustawi onClick na "" albo element.domyslnyOnClik. 4) w funkcji wyświetlającej okno modalne użyj tej funkcji z pętlą. 5) możesz tak samo zrobić z kolorem (pamiętam kiedyś nieaktywne elementy w aplikacjach miały chyba jasno szary kolor) i ja w tym kierunku będę zmierzał.

Przykład:

<button onClick="if(this.innerText=='Nieaktywne'){uaktywnij(false);}else{uaktywnij(true);}">Nieaktywne</button>
<input value="Maciek" />


<button onClick="alert();" style="background-color:darkBlue;color:white;" >Testowy</button>

<div style="visibility:hidden;position:absolute;display:block;width:40%;height:40%;top:10%;
left:20%;background-color:red;border:2px solid black;">
Okno modalne<br>
Twoje imię to:<label></label>
<button style="visibility:hidden;position:absolute;left:80%;top:85%;cursor:pointer;" 
onClick="document.querySelectorAll('BUTTON')[0].click();this.style.visibility='hidden';">Zamknij</button>
</div>




<script>


inpucik=document.querySelectorAll("INPUT")[0];
unieruchomiony_przycisk=document.querySelectorAll("BUTTON")[1];
okno_modalne=document.querySelectorAll("DIV")[0];


unieruchomiony_przycisk.domyslnyOnClick="alert();";


przycisk_akcji=document.querySelectorAll("BUTTON")[0];

przycisk_akcji.setAttribute("style","width:10%;");


function uaktywnij(widoczne){

if(widoczne==false){

przycisk_akcji.innerText="Aktywne";
inpucik.setAttribute("disabled","true");
unieruchomiony_przycisk.setAttribute("onClick","");
okno_modalne.style.visibility="visible";
okno_modalne.querySelectorAll("LABEL")[0].innerHTML=inpucik.value;
unieruchomiony_przycisk.style.backgroundColor="lightGrey";
unieruchomiony_przycisk.style.color="black";
okno_modalne.querySelectorAll("BUTTON")[0].style.visibility="visible";

}else{

przycisk_akcji.innerText="Nieaktywne";
inpucik.removeAttribute("disabled");
unieruchomiony_przycisk.setAttribute("onClick",unieruchomiony_przycisk.domyslnyOnClick);
okno_modalne.style.visibility="hidden";
unieruchomiony_przycisk.style.backgroundColor="darkBlue";
unieruchomiony_przycisk.style.color="white";
okno_modalne.querySelectorAll("BUTTON")[0].style.visibility="hidden";

};
};


</script>

http://infinityhost.ct8.pl/kompilator.html - klikaj na "okno modalne" i możesz zobaczyć w praktyce i pobawić się tym.

Od siebie dodam https://sweetalert2.github.io

Przykładowy kod wywołujący okno dialogowe z przekazaniem zmiennej:

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  imie: string = "Jan";

  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogExample, {
      width: '250px',
      data: { name: this.imie }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

}

@Component({
  selector: 'dialog-example',
  templateUrl: 'dialog-example.html',
})
export class DialogExample {

  constructor(
    public dialogRef: MatDialogRef<DialogExample>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

}

W pliku HTML komponentu Example należy dodać przycisk, który wywoła funkcję otwierającą okno dialogowe:

<button mat-raised-button (click)="openDialog()">Pokaz imie</button>

W pliku HTML dialogu należy umieścić przekazywaną zmienną:

<h2>Twoje imie to: {{ data.name }}</h2>