# Anatomy of a Component — Angular

Source: https://www.geekswithgeeks.com/en/angular/ng-component-anatomy

> Decorator, template, and class working together.

## The three parts

`@Component` configures it, the template defines the HTML, and the class holds data and logic.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<h1>Hello, {{ name }}!</h1>`,
})
export class GreetingComponent {
  name = 'Angular';
}
```

## Selector & template

The `selector` is the custom HTML tag other templates use, like `<app-greeting>`. `template` (or `templateUrl`) defines what renders.

## styleUrl too

A component usually also has `styleUrl: './greeting.component.css'` for scoped CSS that applies only to that component's template.