FRONTENDO
Emberhold Forge
0
0
Angular · Angular Components
New technique

Anatomy of a component

Every Angular component has three parts: a class for the logic, a template for the markup, and its styles.

ng generate component hall-card creates exactly this: class HallCard in hall-card.ts, plus hall-card.html and hall-card.css. The decorator ties the three together.

@Component({
  selector: 'app-hall-card',
  imports: [],
  templateUrl: './hall-card.html',
  styleUrl: './hall-card.css',
})
export class HallCard {
  title = 'The Iron Hall';
}
  • selector: the custom tag: <app-hall-card />.
  • templateUrl: the HTML file (or template for inline HTML).
  • styleUrl: the CSS file. These styles only apply to this component.
  • imports: other components, directives and pipes this template uses.