Μεταβλημένες Προτύπων στο Angular

Στο Angular μπορείτε να έχετε πρόσβαση στις ετικέτες της σελίδας χρησιμοποιώντας μεταβλητές προτύπων. Επιτρέπουν να δέσετε μια ετικέτα σε μια μεταβλητή και να αναφέρεστε σε αυτήν κατά τη λειτουργία του component. Για να δηλώσετε μια τέτοια μεταβλητή, πρέπει να βάλετε πριν από το όνομά της το σύμβολο #.

Ας δούμε στην πράξη. Ας πούμε, για παράδειγμα, ότι έχουμε ένα div. Ας το γράψουμε σε μια μεταβλητή προτύπου:

<div #userName>
	text
</div>

Τώρα στη μεταβλητή userName θα υπάρχει μια αναφορά στο DOM στοιχείο του div μας. Και μπορούμε να αλληλεπιδρούμε με αυτήν όπως γίνεται σε καθαρό JavaScript. Για παράδειγμα, ας εμφανίσουμε το κείμενο αυτού του div σε μια άλλη ετικέτα:

<div>
	{{ userName.textContent }}
</div>

Δίνεται ένα div. Δίνεται μια εικόνα. Αποθηκεύστε την αναφορά στην εικόνα σε μια μεταβλητή προτύπου. Εμφανίστε το src της εικόνας μας μέσα στο div.