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.
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
Przykład:
Angular 
TypeScript <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>