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 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. 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.
Top comments (0)