Angular компонент класса файли

Ҳар қандай компонентнинг асосий қисми унинг функционали, яъни ўзининг дастуридир. Angular да компонентнинг функционали TypeScript тилида ёзилади ва ООП классни ташкил этади.

Ҳар бир компонентда бу класс .ts кенгайтмали файлда жойлашган. Бизнинг асосий компонентимизда бу app.component.ts файли бўлади.

Келинг, бу файлнинг ички қисми билан танишайлик. Аввало компонентимизнинг классага эътиборингизни қаратинг:

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

Бу классга @Component декоратори қўлланилади. Бу декоратор параметри сифатида бизнинг компонентимизни конфигурациялайдиган объектни қабул қилади:

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

templateUrl хусусиятида бизнинг компонентимизнинг версткасини ўз ичига олган файлга йўл белгиланган.

styleUrls хусусиятида бизнинг компонентимизнинг версткасини стилловчи CSS файлларига йўллар белгиланган массиви кўрсатилган. Кўриб турганингиздек, стил файли битта эмас бўлиши мумкин.

selector хусусиятида бизнинг компонентимизнинг HTML коди чиқариладиган (монтироваться бўладиган) HTML тегнинг селектори белгиланган. Бизнинг ҳолимизда app-root номини кўрамиз. Бу номга мос келувчи тег мавжуд. Бу тег src/index.html макет файлида ёзилган. Ушбу тег ёзилган жойга бизнинг компонентимизнинг версткаси киритилади.

imports хусусиятида бизнинг компонентимизга импорт қилинадиган модуллар кўрсатилган.

standalone хусусиятида ҳар доим true қиймати кўрсатилади. Ҳозирча бу Angular-нинг хизмат кўрсатувчи нарсаси, шунинг учун ҳозирча унга чуқур кирилманг.

app.component.ts файлини очинг ва уни ўрганинг.

Бир нечта стил билан файл яратинг ва уларни декораторда уланг.