Components and Templates

Components and Templates

Components are the heart of an Angular app. Each component owns a class, a template, and optionally styles, and together they define a visible piece of the screen.

Declaring a component

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css'],
})
export class ProfileComponent {
  name = 'Ada';
}

The selector names the custom element you place in other templates. The class fields are available to the template automatically.

Using a component

Add the selector to another template:

<app-profile></app-profile>

Template basics

Templates are HTML plus Angular syntax. Interpolation shows values:

<h2>Hello, {{ name }}</h2>

Property bindings push values into attributes, and events listen for user input:

<button [disabled]="busy" (click)="save()">Save</button>

Component communication

Parent components pass data into children with input properties, and children emit events to parents. Inputs are declared with input signals and outputs with output signals. This one-way data flow keeps the direction of change easy to trace.

Styling scoping

Styles in a component style file are scoped to that component, so you write clean CSS without risk of leaking into unrelated screens. View encapsulation is on by default and handles the scoping for you.

Key Points

• A component combines a class, template, and styles.
• The selector places the component into other templates.
• Interpolation and bindings move data into markup.
• Events handle user actions inside the template.
• Component styles are scoped automatically.