What is @Component?

When we want to create a new component in Angular, we have to use the @Component decorator. @Component Decorator basically defines a typing script class as a Component object. In fact, the @Component decorator is a function that takes a variety of parameters. In the Component @decorator, we can specify values of different attributes to finalize the change in component behavior. The most common characteristics of @Component decorator are as follows:

1. selector - A component can be used by the selector expression. Many people treat components as a custom HTML tag, because eventually when they want to use the component in the HTML file, they must have a selector just like the HTML tag.
2. template - A template is part of a component that is rendered in a browser. In this attribute, we can send HTML tags or code directly to the inline code. These templates are sometimes called inline templates. To write multiple lines of code, all code must be enclosed in a backtick (`).
3. templayeUrl - This feature is another way to render HTML tags in the browser. This attribute always takes the name of the HTML file along with the corresponding file path. It is sometimes called an external format. Using this feature is much better than trying to design a complex UI within a component.
4. moduleId - This attribute is used to obtain the associated path of the template URL or URL style for component objects. This Id attribute combines related modules in which the component is attached or tagged.
5. styles/stylesUrls - Components can be customized by providing custom CSS using their own style. They can also refer to external style sheets, so a single style sheet can be used to adjust the appearance of multiple components. To present an inline style we need to use styles and to provide an external file path we need to use styleUrls.
6. providers - In real applications, we have to use or inject different types of custom services into the component to implement business logic for the component. To use user-defined services within the component, we must provide a portion of the service within the provider. Hence the provider attribute always allows array values. This way we can define multiple service location names that are comma-separated within the attribute.