Файл с клас на компонент в Angular

Основната част на всеки компонент е неговата функционалност, тоест самата му програма. В Angular функционалността на компонента се пише на езика TypeScript и представлява ООП клас.

Във всеки компонент този клас се намира във файл с разширение .ts. В нашия основен компонент това ще бъде файлът app.component.ts.

Нека се запознаем със съдържанието на този файл. Първо, обърнете внимание на класа на нашия компонент:

app/app.component.tsexport class AppComponent {
  title: string = 'test';
}

Към този клас се прилага декораторът @Component. Този декоратор чрез своя параметър приема обект, който конфигурира нашия компонент:

app/app.component.ts@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, така че засега не се задълбавайте в нея.