Suggest an editImprove this articleRefine the answer for “What role does the @Component decorator play? What are the main fields in the @Component decorator?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**The `@Component` decorator** tells Angular that a class is a component and sets the metadata for how it works: template, styles, selector, and other parameters. **Key point:** the decorator defines how Angular renders the component, which dependencies are available to it, and how it interacts with the DOM.Shown above the full answer for quick recall.Answer (EN)ImageThe `@Component` **decorator** tells Angular that a class is a component and sets the metadata for how it works: template, styles, selector, and other parameters. It links the class's logic to the view in the interface. ## Main fields of the `@Component` decorator 1. `selector` - the tag name through which the component is used in HTML, for example `<app-my-component>`. 2. `templateUrl` - the path to the component's external HTML template. 3. `template` - alternatively: an inline template as a string instead of a file. 4. `styleUrls` - an array of paths to the component's style files (CSS/SCSS). 5. `styles` - alternatively: inline styles as strings. 6. `providers` - services that will be available only to this component through dependency injection. 7. `animations` - animations applied to the component. 8. `changeDetection` - the change detection strategy (`Default` or `OnPush`). The decorator defines how Angular renders the component, which dependencies are available to it, and how it interacts with the DOM.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.