Anatomy of Components

3 snippets

8 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

SWITCH LAYOUT

src/app.component.ts

• 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

SWITCH LAYOUT

src/panel.component.ts

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

1. import the "Child" component in the parent file
2. add it to the imports component metadata
3. create an instance in the Parent component by using the child <selector-name>

src/app.component.ts

src/panel.component.ts