Components of Angular

Components of Angular

At least one root component connects a component hierarchy to every Angular application's page document object model. Each element also has an HTML template specifying the view displayed in the target environment and a class that holds the data and functionality of the application.

The @Component() decorator recognizes the class below it as a component and offers the template and other component-specific metadata.

Components are a logical part of an Angular application's code. A component is made up of the following elements:

  • Template −  This template is used to render the application's view. The template is where you'll find the HTML that needs to be rendered in the app. The binding and directives are also included in this section.
  • Class − This is similar to a type declared in a programming language such as C. This is where you'll find properties and methods. The class contains the code that supports the view. TypeScript is used to define it.
  • Metadata −  The extra data for the Angular class is defined in the metadata. A decorator is used to describe it.

Making use of component styles

For each Angular component you develop, you can define an HTML template and the CSS styles that go with it, including any selectors, rules, and media queries you need.

One way to achieve this is to use the styles property in the component metadata. The styles property receives an array of strings containing CSS code.