Angular component - basics of properties

Introduction

The essential element of the Angular framework is a Component. Each Angular application must have at least one component to run and serve the view. Behind the scene, the component is a typescript class with a particular decorator Component added. Thanks to that, Angular knows this class will render something and can accept data by inputs and trigger events by outputs. This article will explain the basics of components and how to configure them.

Component use cases

Components are special HTML elements that we can use to:

• serve the content of the whole application, primarily by using AppComponent, which is a root component served as the first element of the view
• create minor pieces of the view, like inputs or buttons
• create a combination of the components by placing one into another to develop more extensive view elements like contents, navbars, or forms.

To use a component, We have to put its selector in HTML in place that We want to display the current component. For example, if we want to display the root component, by knowing that it has an app-root selector, We have to put

<app-root></app-root>

In the HTML. That will render the contents of that component in a selected place.

Component props

As mentioned, Angular heavily uses typescript decorators, which allow us to set initial properties that, with the combination, Angular will make components usable and renderable. Those properties are placed inside of the Component decorator and are:

Selector

The selector is a string that defines the name of the html tag that Angular uses to render a given component, for example, app-root.

Template

The templateUrlis a path to an HTML file that is used as a template for the current component, and the template is a string that holds the HTML template for the current component, same as templateUrl, but kept internally with the component in typescript code. Angular requires that one of those is only present.

Styles

The styleUrls is an array of strings with paths to style files
that are used by the current component. Like with templates, we can store our stylings inside of typescript code by using the style property, which can hold an array of strings with the stylings. The scope of those styles can be changed by using another property, encapsulation. That property can be set to one of the:

• ViewEncapsulation.None - which doesn't limit the style used to the component only, but styles are applied to the whole application. For example, if we would set the background color of a button to red, then that color would be used for each button in the app
• ViewEncapsulation.Emulated - (default) limits styles to the current component only so that it won't affect other components
• ViewEncapsulation.ShadowDom - wraps the current component in the Shadow dom. It is usable if we want to use something other than global styles in our component.

Standalone

Added with version 14 of Angular, it allows us to put components into standalone mode by setting the standalone property to true. We can omit modules and use components directly in the needed place. To use other modules, standalone components, standalone pipes, etc., we can use the imports property, an array of required classes.

Change detection

Angular has a specific change detection mechanism implemented, which looks for changes from the top to the bottom of an application. We can change that behavior by setting changeDetection to ChangeDetectionStrategy.OnPush so change detection will be triggered when any of the inputs change its reference—recommended for optimization purposes.

Providers

The providers property is an array of classes that provides values or properties. In most cases, services are used to be providers whose instances should be set with the current component. Another example could be an Injection token whose value could be overwritten by a value provider and used as one of the component's providers. The example shows how to override the APP_BASE_HREF token by a different value.

  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    }
  ],

There is also the viewProviders property, which works in the same way as providers, but instances are only reachable by components that are not content projected, so those that are placed by <ng-content> do not have access to viewProviders.

Host

The host property can be used for setting properties on a host element, for example:

host: {
    'class' : 'my-custom-class'
  }

Will result with:

<app-root class="my-custom-class"></app-root>

Jit

The jit property stands for "just in time", when set to true, tells Angular that this component will be compiled during the run time on the browser side.

Inputs and Outputs

The inputs property is used for information on which properties on the component can be set. On the other hand, the outputs property is used to inform which events are supported by the component. A more convenient approach for those is to use Input and Output decorators.

Queries

The queries property is used for defining content queries, for example, if we want to reach an instance of the internal component. As the above more convenient approach is to use, for example, ViewChildren or ContentChildren decorators.

Animations

The animations property defines animations for the current component, for example, if we want to animate when a new item is on the list. Since it is a pretty intensive topic, more about animations can be found here.

Interpolation

The interpolation property is an array with two strings that tells angular how are variables or methods wrapped in the HTML code. By default, it is set to {{ and }} brackets.

Schemas

The schemas property is used to declare and allow the use of properties or elements not from Angular.

Host directives

The hostDirectives property is an array with standalone directives that will be applied to the current component.
For example:

  hostDirectives: [{
    directive: Tooltip,
    inputs: ['tooltipMessage'],
    outputs: ['tooltipOpened'],
  }],

Thanks to that, we can omit adding the Tooltip directive, and we are informing which properties and events using.

Preserve white spaces

The preserveWhitespaces property expects a boolean value and, when set to true, will remove the \s character class in JavaScript regular expressions.

Summary

Components are basic bricks of the Angular framework and can be configured in many ways. Understanding them opens the way to creating great applications.