Let’s make a series of entries in which we’ll create an application with Angular 8 and Firebase. The application will be a ToDo App, that is, a task manager app. It will use the Cloud Firestore database, and Firebase Authentication for the login system.

Related entries

1. Introduction 
2. Configuring Firebase and Bootstrap in Angular. Understanding Cloud Firestore
3. Creating our first component – Click event  <– You are here
4. Our first reactive form
5. Saving and reading data in Cloud Firestore – ngIf and ngFor
6. Introduction to Routing
7. Login system with Angular and Firebase
8. Releasing our Angular App in Azure with VS Code

As I publish the articles, I will be placing the links here above.

Creating Our First Component – Click Event

We already gave an introduction to the architecture of a typical Angular app, and we configured our backend in Firebase. Now, let’s create our first component.

This component will be the initial screen of our application, in this we will place the task list of our task management application. We are going to use the Angular CLI to create the component. For this we can go to a new terminal, because the previous one is executing an instruction that compiles our project every time we make changes in the source files (if you don’t have this, run a ng serve -o command in the terminal). Now, let’s create the new component with this command:

ng generate component todo/todo-list

The todo/todo-list part is for placing the component todo-list in a folder named todo. We put it in a folder just to organize our project.

With this, the component will be generated. By the way, if you are not sure that you are going to create what you want to be created using the generate command, you can use –dry-run for the Angular CLI to place in the terminal the files that will be created, without these being created (note, there are two dashes in front of dry-run). Like this:

ng generate component todo/todo-list –dry-run

In the todo-list.component.html let’s place the following code:

Here we see that we have a header h4, and a button. With this button we will allow the user to create new tasks or todos. Note the special syntax of the click attribute. It is enclosed in parentheses, this indicates that when the user clicks the button, the clickAddTodo function that we have there will be executed. And where is this function going to be? In the class of this component.

Let’s go to todo-list.component.ts to implement the clickAddTodo function, put the following function within the TodoListComponent class:

What this is going to do is to show an alert to the user when you click on the button. We can try it and see that it works. To try this we have to modify the app.component.html file, deleting everything that’s in it and placing the following code:

Now what we are going to do is that when we click on the button, we will be shown a form in a bootstrap modal. A modal is a pop-up window. The first thing we must do is create a new component. This component will be the form that will be displayed in the modal. Let’s go back to the terminal, and use the following command:

ng generate component todo/todo-form

Now, let’s make the button show this component in a modal. For that, we must first inject a ng-bootstrap service to work with modals.

In Angular, a service is typically a class which has a well-defined purpose, and which can be used from various places in your project. A typical reason to use services is to be able to share functionality between classes and components. Thus, if there is a functionality that you want to consume from several components, then it is normal to place this functionality in a service which will be consumed from these components.

In our case, as maybe we want to work with modals from several components, it is logical that there is a service for this purpose. In the case of ng-bootstrap (the tool that we installed in the previous entry), this class is called NgbModal. To inject it into our component we will use the constructor of our TodoListComponent class:

With this we can substitute the previous clickAddTodo code with the following:

What this function clickAddTodo does now is to use the open function to open a new modal with the component whose content we want to place in the modal, in our case, the TodoFormComponent. Then, from the variable that represents the modal, we will use a promise to define what action to take when the modal is closed, and what we will do is execute the function handleModalTodoFormClose.

Finally, for this modal to work, we need to go back to the app.module.ts, and place the TodoFormComponent component in the entryComponents property of the NgModule decorator. The reason for this is that this component is going to be created dynamically, that is, at the moment of opening the modal with the TodoFormComponent:

entryComponents: [TodoFormComponent]

With this, we can go back to Google Chrome and verify this functionality. As we can see, the modal opens with the content of our component.

In the next post we will create our first form, a reactive form.

Summary

• We can define events using event bindings, like (click)=”function()”
• If a component is created dynamically, we have to put it in the entryComponents array of the NgModule decorator of the module.
• A service is a class with a well-defined purpose. We typically inject services through constructors
• It is best practice to use the Angular CLI to generate elements of your Angular app using the ng generate command.

Regards!