Παιδικά Components στο Angular

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

Ο κώδικας νέων components δημιουργείται αυτόματα από το Angular μέσω μιας ειδικής εντολής τερματικού: generate component. Μετά τη λέξη component πρέπει να γράψουμε το όνομα του νέου μας component. Ας υποθέσουμε ότι θέλουμε να δημιουργήσουμε το component user:

ng generate component user

Μετά την εκτέλεση της εντολής θα δούμε ότι έχει εμφανιστεί ένας νέος φάκελος app/user. Σε αυτόν θα βρίσκονται όλα τα τυπικά αρχεία του component.

Στο αρχείο του component user.component.ts θα δημιουργηθεί αυτόματα ο decorator του component:

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

Επίσης σε αυτό το αρχείο θα δημιουργηθεί αυτόματα η κλάση του component:

export class UserComponent {

}

Τώρα πρέπει να συνδέσουμε το παιδικό μας component στο γονεϊκό. Ας υποθέσουμε ότι το γονεϊκό είναι το component app, που υπάρχει αρχικά μετά την εγκατάσταση του framework. Ας το εισάγουμε στο component μας:

import { UserComponent } from './user/user.component';

Στον decorator του component στο κλειδί imports θα ορίσουμε το εισαγμένο μας component:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // εδώ
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Τώρα μπορούμε να εμφανίσουμε το περιεχόμενο του παιδικού component στο γονεϊκό. Για αυτό, στο αρχείο του template του γονέα πρέπει να γράψουμε μια ειδική ετικέτα, το όνομα της οποίας ορίζεται στην ιδιότητα selector του decorator @Component του παιδιού. Στην περίπτωσή μας αυτή είναι η ετικέτα app-user. Ας τη γράψουμε στο template του γονέα:

κάποιο κείμενο
<app-user></app-user>

Δημιουργήστε το component ProductComponent. Συνδέστε αυτό το component στο κύριο component του project σας.

Κάντε αλλαγές στο template του παιδικού component. Βεβαιωθείτε ότι εφαρμόζονται στον browser.

Αλλάξτε τα CSS styles του παιδικού component. Βεβαιωθείτε ότι εφαρμόζονται στον browser.

Στο παιδικό component δημιουργήστε τις ιδιότητες name και price. Εμφανίστε τις τιμές τους στο template του παιδικού component.