Faili lenye darasa la komponeneti katika Angular

Sehemu kuu ya komponeneti yoyote ni utendaji wake, yaani programu yake yenyewe. Katika Angular, utendaji wa komponeneti inaandikwa kwa lugha ya TypeScript na inawakilisha darasa la OOP.

Katika kila komponeneti darasa hili iko katika faili lenye kiendelezi .ts. Katika komponeneti yetu kuu hii itakuwa faili app.component.ts.

Hebu tufahamu yaliyomo kwenye faili hii. Kwanza makini na darasa la komponeneti yetu:

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

Darasa hili linatumia kiambishi @Component. Kiambishi hiki kinakubali kitu kama kigezo, kinachosanidi komponeneti yetu:

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

Katika sifa templateUrl imewekwa njia kwa faili inayobeba muundo wa HTML wa komponeneti yetu.

Katika sifa styleUrls imewekwa orodha ya njia kwa faili za CSS, zinazoboresha muonekano wa HTML wa komponeneti yetu. Kama unavyoona, faili za mitindo zinaweza kuwa zaidi ya moja.

Katika sifa selector imewekwa mtego wa lebo ya HTML, ambapo maandishi ya HTML ya komponeneti yetu itaonyeshwa (kusanikishwa). Kwa upande wetu tunaona jina app-root. Jina hili linahusiana na lebo ya jina moja. Lebo hii imeandikwa kwenye faili ya muundo src/index.html. Mahali ambapo lebo hii imeandikwa, ndipo muundo wa HTML wetu utaingizwa.

Katika sifa imports yameorodheshwa moduli, ambazo zinaingizwa kwenye komponeneti yetu.

Katika sifa standalone kila wakati itaonyeshwa thamani true. Kwa sasa hii ni kitu cha kihuduma cha Angular, kwa hivyo usijisumbue nayo kwa sasa.

Fungua faili app.component.ts na uisomee kwa makini.

Tengeneza faili kadhaa za mitindo na uziangishe kwenye kiambishi.