FresherTechnicalAngular

What metadata does the @Component decorator take?

Try answering first

Model answer

The @Component decorator tells Angular how to create and render a class as a component. The most common options are:

selector: the HTML tag name used to place the component, such as app-user-card.
template or templateUrl: the inline HTML or a path to an HTML file.
styles, styleUrl or styleUrls: the CSS scoped to the component.
imports: the components, directives and pipes used in the template.
changeDetection: Default or OnPush.
providers: services created for this component and its children.

@Component({
  selector: 'app-user-card',
  imports: [DatePipe],
  template: `<p>{{ joined | date }}</p>`,
  styles: `p { color: gray; }`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserCard {
  joined = new Date()
}

Others you may meet are encapsulation, host and animations. Components are standalone by default in current Angular. The standalone: true flag in older code is now redundant.

Know the required parts: a selector and a template.

Key points

selector names the HTML tag
template or templateUrl defines the view
imports lists what the template uses
changeDetection and providers tune behavior

Likely follow-ups

What does the encapsulation option change?

Common mistakes

Forgetting to list a used component or pipe in imports
Still writing standalone true as if it were required