Learning Angular - Components Anatomy
I continue my Angular journey and break down the components.ts
file,
an essential building block of Angular.
I will go over the anatomy of this file, reviewing the standard generated file, section by section and how they work.
You should have an understanding of what an Angular component file layout is, the essential parts, and allowed values for those parts.
This article will take you less than six minutes to read.
Introduction
From learning how Angular boots up, I start seeing what is going on.
Components are important to Angular as every new Angular application
created inserts a component: app-root
in the index.html file with
corresponding set of app.component.*
files.
Let’s look at these sets of files:
app.component.ts
app.component.html
app.component.css
Following Along
I am only using a blank application generated using: ng new test6
.
If you want to follow along, do the following steps with Angular
installed at the command prompt, run: ng new test6
app.component.ts
This is the contents of the app.component.ts
file:
This a typical Components TypeScript file, it has these sections:
- imports
- declarations
- selector
- template
- style
- class
I will go over each in detail.
Imports
Each component.ts
starts with an import
section, specifically:
This imports the Component
definition from Angular’s core
library. The next section, the declarations, needs it to define how to
connect to:
- selector - which element to connect the component to in the template
- template - what is the HTML layout
- style - what is the CSS definitions
Without this section, the @Component
section would throw an error as
JavaScript/TypeScript won’t be able to find the definition.
Declaration
Each component needs a @Component
declaration, in our case:
This configures how Angular should use the component in the application:
selector
- tells Angular what this component which element to bind totemplateUrl
- which HTML file to usestyleUrls
- which CSS files to use for the styles
Selector
The selector tells Angular where this component should appear in the component parent’s template.
In the generated file, the declaration has:
This configures the selector
to replace element app-root
in the
component’s parent with the component’s details.
This can be any CSS selector:
- element -
app-root
would replace:<app-root></app-root>
- attribute -
[app-component]
would replace:<div app-root></div>
- class -
.app-root
would replace:<div class="app-root"></div>
Class
The class
part of the file is the section where your code will go
into. In the file generated, the contents are:
This is where new code will go. The sample code automatically creates
a variable and assigns the name of the project to it: title
.
The sample app uses the title
variable in the app.component.html
file.
component.html
file
The src/app/app.component.html
file generated has the following
content:
The important section from the generated file is:
The value {{ title }}
is from the AppComponent
class defined in
the src/app/app.component.ts
file.
Defining Templates
A template is basically the HTML skeleton a component describes itself with. It’s the glue between the JavaScript/TypeScript and CSS. It gives a foundation for these two to work together through elements, classes, and attributes.
There are two ways to define to Angular which template to use, either a file or inline HTML.
Separate file
The generated app uses the following format to define templates:
The line: templateUrl
configures the component to use the HTML
defined in another file, in this case, in the same directory and file
named: app.component.html
.
Inline
Angular has a configuration where the definition of the HTML is inline the same component file. To have basic text, this would be the configuration:
The definition is template
and the templateUrl
is not set
anymore. This is handy for components where HTML is scant.
Defining Styles
A style gives more precision in how a page will look in HTML. Styles give components more pizzaz than with just plain HTML.
Similar to template
and templateUrls
, style definition can be in a
separate file or inline the same file.
Separate File
The default for a newly generated Angular app is to have styles defined in a separate file. The configuration is:
The line: styleUrls
configures the component to use the styles
defined in separate files, in this case, in the same directory and
file named: app.component.css
.
As this is an array element, multiple CSS files are available for the component.
Inline
Angular has a configuration where the definition of the styles are inline the same component file. To have a basic style, this would be the configuration:
style
defines the CSS style for the component within a single line
enclosed by the back-ticks.
This is useful for components where there are not any style needed.
Big Picture
Just to step out to go over anatomy of an Angular component:
imports
- get the correct library that implements the
@Component
- get the correct library that implements the
@Components
, declare:- what to bind the component to? use:
selector
- what HTML definition to use:
- inline? use:
template
- in an HTML file? use:
templateUrl
- inline? use:
- what CSS style definition to use:
- inline? use:
styles
- in a CSS file? use:
styleUrls
- inline? use:
- what to bind the component to? use:
class
, declare:- what variables that can be access in the HTML definition through
{{ }}
parameters - do actual work!
- what variables that can be access in the HTML definition through
Conclusion
Components are an essential building block for an Angular project. A component file has three basic parts:
- imports
@Component
declarationsclass
definition
This is a quick tour of the parts of an Angular component file.