Αμφίδρομη σύνδεση δεδομένων στο Angular

Στο Angular μπορούμε να κάνουμε έτσι ώστε καθώς πληκτρολογούμε κείμενο σε ένα input, αυτό το κείμενο να εμφανίζεται αυτόματα σε μια ιδιότητα της κλάσης. Αυτό ονομάζεται αμφίδρομη σύνδεση δεδομένων.

Για να λειτουργήσει μια τέτοια σύνδεση, αρχικά πρέπει να ενεργοποιηθεί. Για αυτό, στο αρχείο του component εισάγουμε το FormsModule:

import { FormsModule } from '@angular/forms';

Και στη συνέχεια το προσθέτουμε στην ιδιότητα imports του decorator @Component:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

Μετά από αυτό, η αμφίδρομη σύνδεση δεδομένων θα είναι ενεργοποιημένη και μπορούμε να τη χρησιμοποιήσουμε. Ας το κάνουμε αυτό.

Αρχικά, ας δηλώσουμε μια ιδιότητα της κλάσης, την οποία θα υποβάλουμε στη συνέχεια σε αμφίδρομη σύνδεση:

export class AppComponent {
	public text: string = '';
}

Ας υποθέσουμε ότι έχουμε ένα div και ένα input. Ας υποθέσουμε ότι στο div εμφανίζεται κάποια ιδιότητα της κλάσης:

<div>
	{{ text }}
</div>
<input>

Ας συνδέσουμε την ιδιότητα text μας με την αλλαγή του input. Για αυτό, στο input πρέπει να γράψουμε μια ειδική directive [(ngModel)], της οποίας η τιμή θα πρέπει να είναι η ιδιότητα της κλάσης μας:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

Τώρα, αν εκτελέσουμε τον κώδικα και αρχίσουμε να πληκτρολογούμε κείμενο στο input, αυτό το κείμενο αμέσως θα αρχίσει να εμφανίζεται στο div.

Δίνεται ένα input και μια παράγραφος. Στο input εμφανίζεται ένας αριθμός. Κάντε έτσι ώστε καθώς εισάγεται αριθμός στο input, στην παράγραφο να εμφανίζεται το τετράγωνο αυτού του αριθμού.

Δίνονται δύο inputs και μια παράγραφος. Στα inputs εισάγονται αριθμοί. Κάντε έτσι ώστε στην παράγραφο να εμφανίζεται το άθροισμα των εισαγμένων αριθμών.