Using a component in Angular 2

How components created by us are used in Angular 2, a task that, although simple, requires several steps.

In the last article we carried out all the steps for . We really saw that most of the code is generated from the Angular CLI, which speeds up development a lot and makes our work easier.

Now, to wrap up our practice, we’re going to learn how to use the component we just created. It is a simple task, but due to Angular’s architecture and the way it works, it is something that we will have to do in several steps:

1. Create the HTML to use the component

In the place of the application where you are going to use the component, you have to write the necessary HTML for it to be displayed. The HTML is nothing more than the component tag, which has been defined in the decorator function, “selector”() attribute.

Since we are starting with Angular 2 and the previous one was the first component created by ourselves, we can only use it inside the main component (the one generated by Angular CLI when building the new project).

The HTML of this main component is found in the “app.component.html” file. In that file, the main component view, we need to place the tag to allow the newly created component to be displayed.

The problem is that that tag is not known to the browser. When we create the component we generate all the code, in various files, necessary to bring the component to life, but it will have to be included so that the browser knows that label when it is going to be used. This is what we do in the following steps.

2. Import the component code

As we said, from the main component we do not know the code of the component that is intended to be used. In Angular 2 in general, any file with Javascript code that you want to use must be imported.

In the component from where you intend to use that other component you need to import its code. As you will see in the main .ts file of a component, it always starts with a library import provided by Angular. Now, after the import of the Angular libraries, we will place the import of our component:

import { ComponentNameComponent } from ‘./component-name’

That import indicates that you want to bring the class of the component and after the “from” is the route from where you bring it.

Note: Remember that you don’t need to tell it exactly which file the ComponentNameComponent class is in, because there is an index.ts file in every generated component that acts as the root and associates the component’s folder name with the .ts file where the class is. We explained this in the previous article, how to create a component, in the “Recognizing component files” section.

3. Declare that you are going to use this component

The import allows you to know the code of the component, but it is still not enough to be able to use it. We have one last step left.

In the component from where we have included the import of the component, a little further down you find the decorator function of the component. In that function you must declare all the components you intend to use.

I do that from the main component’s decorator function and I have to declare all the components and directives to use inside the “directives” array.

directors:

The complete decorator for the parent component would look something like this:

@Component({ moduleId: module.id, selector: ‘app-root’, templateUrl: ‘app.component.html’, styleUrls: , directives: })

Notice that the “directives” array allows me to declare that I’m going to use various components. I just separate their names by commas. What I indicate, as you can see, is the name of the class of the component that I intend to use. This class is the one that you have imported with the corresponding “import” from the previous step (point 2).

Note: It may seem a bit strange that the array is called “directives” instead of “components” and that is because in that array we could declare that we are going to use both components and directives. Also you have to remember, because it was mentioned in the component theory article in Angular 2, that a component is nothing more than a specific type of directive.

And that’s it! Saving the files should reload the app in the browser and you should see the HTML written for the component you’re using that we just created.

The process may seem somewhat laborious, but as it is repeated we will see that there is not so much work. The most boring part of writing a component, the skeleton or scaffolding, is already done for you thanks to Angular CLI. So we are left to simply make the part of the component that corresponds to the needs of the application.

With the knowledge that we have been providing in the previous chapters of the Angular 2 Manual, we are sure that you will be able to place more code, both in the HTML and in the class to provide other types of functionality as a practice.