Το αρχείο με την κλάση του component στο Angular

Το κύριο μέρος οποιουδήποτε component είναι η λειτουργικότητά του, δηλαδή ο ίδιος ο προγραμματισμός του. Στο Angular, η λειτουργικότητα του component γράφεται στη γλώσσα TypeScript και αντιπροσωπεύει μια κλάση ΑΑΠ.

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

Ας εξοικειωθούμε με τα περιεχόμενα αυτού του αρχείου. Αρχικά, δώστε προσοχή στην κλάση του component μας:

export class AppComponent {
	title: string = 'test';
}

Σε αυτήν την κλάση εφαρμόζεται ο decorator @Component. Αυτός ο decorator δέχεται ως παράμετρο ένα αντικείμενο, το οποίο ρυθμίζει το component μας:

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

Στην ιδιότητα templateUrl ορίζεται η διαδρομή προς το αρχείο που περιέχει το markup του component μας.

Στην ιδιότητα styleUrls ορίζεται ένας πίνακας διαδρομών προς τα CSS αρχεία, που στυλάρουν το markup του component μας. Όπως βλέπετε, τα αρχεία στυλ μπορεί να είναι περισσότερα από ένα.

Στην ιδιότητα selector ορίζεται ο selector της HTML ετικέτας, στην οποία θα εμφανίζεται (θα τοποθετείται) ο HTML κώδικας του component μας. Στην περίπτωσή μας, βλέπουμε το όνομα app-root. Σε αυτό το όνομα αντιστοιχεί μια ομώνυμη ετικέτα. Αυτή η ετικέτα είναι γραμμένη στο αρχείο layout src/index.html. Σε εκείνο το σημείο, όπου είναι γραμμένη αυτή η ετικέτα, θα εισάγεται το markup του component μας.

Στην ιδιότητα imports αναφέρονται οι modules, που εισάγονται στο component μας.

Στην ιδιότητα standalone θα υπάρχει πάντα η τιμή true. Προς το παρόν αυτό είναι μάλλον ένας βοηθητικός μηχανισμός του Angular, επομένως μην ασχοληθείτε προς το παρόν με αυτό.

Ανοίξτε το αρχείο app.component.ts και μελετήστε το.

Δημιουργήστε πολλά αρχεία με στυλ και συνδέστε τα στο decorator.