Author: Dawid Adach
Free live lesson
In the last lesson we went through the most important file within our project. Now we will focus on the components.
Among other advantages, Angular gained its position thanks to its component-based architecture.
Components can be thought of as small pieces of an interface that are independent of each other. Imagine that you have a simple application with a list of items and a corresponding search box to retrieve the items by word matches. The box with listed names, the search box, and the main sheet where the other two boxes are placed are all considered separate components in Angular.
Components of a similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application. This is particularly useful in enterprise-scope applications where different systems converge but may have many similar elements like search boxes, date pickers, sorting lists, etc.
Let's have a look at how components are built within Angular
As you can see within a
src/ location, there is a folder called
app containing a few files starting with
app represents the App component.
Usually components are organised within folders (1 component = 1 folder). Each Angular project has to contain at least one component. Each component consist of a few files:
2. Component logic (
Let's open the file located in
/src/app/app.component.ts. You will see the following content
app.component.ts file consist of few parts:
At the beginning of the component's
.ts file we have to import a Component from the Angular library. This is required to make our component work. An @Component is a
Decorator (don't have to bother what does it mean for now) - it provides a configuration metadata that determines how the component should be processed, initialized and used at a runtime.
Whenever we want to use other components within another component we also have to import it in that place. (We will learn how to do that in the next lesson).
@Component decorator which we imported in a first line allows us to specify the
matadata for our component. The metadata contains a few parameters:
selectorparmeter contains the name of the tag that can be used to create this component.
templateUrlparameter contains the relative URL/path to the HTML template
styleUrlsparameter contains the array of CSS styles to be used for styling the component or a path to the external file (the
You might have noticed from a previous lesson, that we used a <app-root></app-root> in the
Our component can be called in your HTML code just like any standard HTML tag, i.e:
The last part of our component is a Component Class which contains attributes and functions. This is the place where the entire logic of a given component is stored. In the next lesson we will fill this component with some functions to make our application work.
3. Component template (
The template file which is responsible for the view of our component. A template looks like regular HTML, except that it also contains Angular template syntax. Our template can use data binding which allows us to synchronize data between our Application and the DOM.
4. Component styles (
This file contains all the styles for our component.
5. Component tests (
Within this file we will create tests for our component. Tests are important for each application, and using them helps us to avoid breaking components' logic while making some updates/enhances to them.
6. App.module code (
As we mentioned before - the Angular application has to contain at least one component. This first component is called the root component.. The root component is the first Angular component that gets bootstrapped when the application runs. Two things are special about this component:
First, if you open the application module file
src/app/app.module.ts, youwill see something like:
You'll notice that, it's added to the bootstrap array of the module definition.
Second, if you open the src/index.html file (the first file that gets rendered when you visit the application URL) of the application - you'll notice that it's called inside the documenttag.
app.module.ts file is only required for our App component (root component). All other components that we will use inside our application wont require
module.ts file to work.
Previous lesson Next lesson
Spread the word: