Angular component - basics of properties
Tags: beginners, javascript, programming, angular
Published: 2023-06-09 15:57:45

### 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
```html
<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](https://www.typescriptlang.org/docs/handbook/decorators.html), 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 `templateUrl`is 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_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.
```typescript
  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:
```typescript
host: {
    'class' : 'my-custom-class'
  }
```
Will result with:
```html
<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](https://angular.io/api/core/Input) and [Output](https://angular.io/api/core/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](https://angular.io/api/core/ViewChildren) or [ContentChildren](https://angular.io/api/core/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](https://angular.io/guide/animations).

#### 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:
```typescript
  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.