Component class file in Angular

The main part of any component is its functionality, that is, its program itself. In Angular, the component functionality is written in TypeScript and is an OOP class.

In each component, this class is located in a file with the extension .ts. In our main component, this will be the file app.component.ts.

Let's take a look at the contents of this file. First, take a look at our component class:

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

The @Component decorator is applied to this class. This decorator takes as its parameter an object that configures our component:

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

The templateUrl property specifies the path to the file containing the layout of our component.

The styleUrls property specifies an array of paths to CSS files that style the layout of our component. As you can see, there may be more than one style file.

The selector property specifies the selector of the HTML tag in which the HTML code of our component will be output (mounted). In our case, we see the name app-root. This name corresponds to the tag of the same name. This tag is written in the layout file src/index.html. The markup of our component will be inserted into the place where this tag is written.

The imports property specifies the modules that are imported into our component.

The standalone property will always be set to true. This is more of an Angular utility thing right now, so don't bother with it for now.

Open the app.component.ts file and examine it.

Make some style files and include them in the decorator.