Anatomy of Components

v.18

Fabio Biondi
Google Expert | Angular
# Introduction
- The
@Component
decorator is applied on the AppComponent
class and it configures the component with the required properties, that are called metadata
selector: 'app-root'
, which means this component can be utilised in HTML using the <app-root></app-root>
tag.
standalone:true
is mandatory if you want to use the latest version of Angular and it is useful to distinguish the new type of components (available from Angular v.14) compared to the previous ones. Probably this option won't be required anymore in future versions of Angular
# Custom Components
All custom components in Angular have the same structure.
This Panel component is a new component that can be use everywhere in the application.
And, as you can see, its structure is exactly the same of AppComponent
# Parent & Child components
When a component (aka "child") is used in another component ("parent") we have a relationship "parent -> child":
So, how can we use a component inside another one?
- import the "Child" component in the parent file
- add it to the
imports
component metadata
- create an instance in the Parent component by using the child
<selector-name>
In the next example you can see how 3 instances of PanelComponent
(child) are used in the AppComponent
(parent):
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!