Anatomy of a Component
Every screen in Greenhouse, from the whole page down to one small button, is a component. Once you can read one component, you can read them all, because they share the same four parts. This lesson takes one apart.
The rule
A decorator on a class: selector says where, template says what.
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-plant-card',
template: `
<h3>{{ name() }}</h3>
<p>Water every {{ everyDays() }} days</p>
`,
styles: `h3 { color: seagreen; }`,
})
export class PlantCard {
name = signal('Boston fern');
everyDays = signal(3);
}- The class (
PlantCard) holds the component's data and methods. It is normal TypeScript. - The
@Componentdecorator attaches metadata: an object that tells Angular "this class is a component, and here is how to show it". selectoris the CSS selector Angular matches in parent templates.app-plant-cardmeans "wherever you see<app-plant-card>, put this component". Theapp-prefix avoids clashes with real HTML tags.templateis the HTML it draws;stylesis its CSS.
The fields are signals: boxes that hold a value and tell Angular when it changes. You read a signal by calling it, name(), and change it with set or update:
this.everyDays.set(5);
this.everyDays.update(d => d + 1);Because Angular knows exactly which signals a template reads, a change to everyDays refreshes only what depends on it.
The shortcut
Read any component top to bottom as a sentence: "When a parent writes selector, draw template, styled by styles, using data from class." If one of those four is missing or wrong, you have found your bug.
The selector
selector: 'app-water-button'— a parent will write<app-water-button />.
The usual slip is writing {{ name }} instead of {{ name() }}. Without the call you are showing the signal itself, not its value, so the page prints something like [Signal: Boston fern] instead of plain "Boston fern".
Drills
Answer fast — trust the rule.
What does the selector in @Component decide?
Given name = signal('Fern'), how does the template show the value?
Which call adds one to everyDays = signal(3), based on its current value?
What does the @Component decorator add to the class?
Remember
- A component is a class plus
@Componentmetadata: selector, template, styles. - Read it as one sentence: where a parent writes the selector, draw the template using the class's data.
- Trap: signals are read by calling them,
name(), notname.