Μετάδοση Δεδομένων σε Παιδικό Component στο Angular

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

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

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Τώρα πρέπει να δηλώσουμε ότι σε αυτές τις ιδιότητες θα εισέρχονται δεδομένα από έξω. Για αυτό χρησιμοποιείται ένας ειδικός decorator Input. Ας τον εισάγουμε στο παιδικό μας component:

import { Input } from '@angular/core';

Και τώρα ας εφαρμόσουμε αυτόν τον decorator για τις ιδιότητες μας:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Ας προσθέσουμε την εμφάνιση των δεδομένων στο αρχείο του template του παιδικού component:

<p>{{ name }}</p>
<p>{{ age }}</p>

Και τώρα στο template του γονέα, κατά την κλήση της ετικέτας του παιδικού component, ας γράψουμε attributes, τα ονόματα των οποίων θα ταιριάζουν με τα ονόματα των ιδιοτήτων της παιδικής κλάσης. Οι τιμές αυτών των attributes θα εισέλθουν στις ιδιότητες της παιδικής κλάσης:

<user-data name="john" age="25"></user-data>