Skedari me klasën e komponentit në Angular

Pjesa kryesore e çdo komponenti është funksionaliteti i tij, domethënë vetë programi i tij. Në Angular, funksionaliteti i komponentit shkruhet në gjuhën TypeScript dhe përfaqëson një klasë OOP.

Në çdo komponent, kjo klasë ndodhet në një skedar me zgjatje .ts. Në komponentin tonë kryesor, ky do të jetë skedari app.component.ts.

Le të njihemi me përmbajtjen e këtij skedari. Për fillim, vëreni klasën e komponentit tonë:

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

Kësaj klase i aplikohet dekoratori @Component. Ky dekorator me parametrin e tij merr një objekt, i cili konfiguron komponentin tonë:

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

Në vetinë templateUrl është caktuar rruga në skedarin që përmban markup-in e komponentit tonë.

Në vetinë styleUrls është caktuar një grup rrugësh në skedarët CSS, që stilizojnë markup-in e komponentit tonë. Siç e shihni, skedari i stileve mund të mos jetë vetëm një.

Në vetinë selector është caktuar selektori i tag-ut HTML, në të cilin do të dalë (do të montohet) kodi HTML i komponentit tonë. Në rastin tonë, ne shohim emrin app-root. Këtij emri i përgjigjet një tag me të njëjtin emër. Ky tag është shkruar në skedarin e layout-it src/index.html. Në atë vend, ku është shkruar ky tag, do të futet markup-i i komponentit tonë.

Në vetinë imports janë specifikuar modulet, që importohen në komponentin tonë.

Në vetinë standalone gjithmonë do të jetë specifikuar vlera true. Tani për tani kjo është më shumë një gjë shërbimore e Angular, prandaj mos u thelloni në të.

Hapni skedarin app.component.ts dhe studijoni atë.

Krijoni disa skedarë me stile dhe lidhni ata në dekorator.