In this article, we’ll talk about one of the core features of building Single Page Applications (SPAs) with Angular i.e. components. Modern front-end frameworks/libraries operate on the primary concept of component-based development and hence contribute to better code management, maintenance, and scalability. Throughout this article, we will see how Angular creates these components and enables their utilization in the overall application. We will also understand the meanings and reasons behind each file that is created when we generate a new component in Angular. Without further ado, let’s get started!

What is Angular?

Angular is a framework for building front-end of web applications. It allows component-based development and contributes to a long term goal of building Single Page Applications (SPAs). Just in case you’re not familiar with what component-based development really is, you can think of it in a way that your web page is divided into multiple parts; header, footer, side menu, main area, etc. Even inside the main area, you might have multiple sub-parts that function differently according to the application use case. We refer to these parts and sub-parts as components in Angular.

These components are developed in a way that they are independent and reusable. Also, if we wish to dynamically change a single part of a web page, we don’t need to refresh the whole page. Instead, using this component-based approach, we can refresh that specific part/component without reloading the entire page.

This was a brief recalling introduction of Angular and I hope by now you’re all set to embark upon the journey of exploring components in Angular. Note that if you’re new to the world of Angular, you might struggle a bit initially in understanding the concepts. Once you get a hold of what’s happening around, it will be a really smooth experience. So, don’t hang up and make sure to understand the logic and reason behind these concepts rather than jumping directly to the coding/programming part of it. You first need to understand and have a fine grip on the theoretical aspects. Once you properly understand the gist of it, then proceeding towards the actual coding and implementation chain will not be much of a difficult task.

What are Components in Angular?

We have already covered a slight detail of what components are while discussing about component-based development in the previous section. Without further delays, let’s jump straight into understanding the scope and implementation of components in the Angular environment. 

Angular components do not exist stand-alone. In order to create and utilize them, we first need to initiate an Angular project. We can create a new Angular project learning-angular by running the following command in the console window.

ng new learning-angular

If you face any issues while creating the project, you can see our detailed guide on creating an Angular project here

Creating Components

We use ng generate component <your_component_name> to create a new component in Angular. Let’s create a new component my-first-component in our project. Navigate to the project directory and run the following command.

ng generate component my-first-component

The above command will create a component my-first-component in ./src/app/ as shown below.

Navigate into my-first-component folder. You’ll see a bunch of .html.scss and .ts files as shown below.

Don’t get overwhelmed by seeing so many files. This is the Angular way of creating components. Angular likes to manage the code and build the application architecture in a way such that each unit chunk is responsible for performing its own task without explicitly intervening into the jobs of other chunks/files. This way, the whole development experience is smooth, neat, and easy to manage. Hold on for a bit, a detailed discussion on each of the files is following along. 

Understanding the Component File Structure

In this section, we’ll discuss in detail about the file structure of a component in Angular. We’ll also discuss the reason behind each file in the component file structure and eventually see how these files contribute towards a segregated application which is easy to manage and maintain.

To utilize its full behavior, each component requires an HTML code for rendering, CSS for styling and some scripting (TypeScript in this case) to handle dynamic application behaviors. Instead of combining all this stuff into a single HTML file, Angular prefers to segregate them and handle each of them independently. In the case of our component, my-first-component.component.html contains all the HTML code to render this component on the browser screen, my-first-component.component.scss contains all the code for styling the rendered stuff, and my-first-component.component.ts entails the code for handling dynamic behaviors associated with this particular component. 

Note that there are two .ts files in the component directory. We have already touched upon one of them above. The file my-first-component.component.spec.ts is not used for development purposes. It is there for unit testing of our source files. In short, if you’re just concerned about the development of your component, you don’t need to worry about this particular file. We will revisit this file and write some meaningful code for unit testing in later tutorials and articles. For now, just focus on the remaining three files. 

For those wondering what unit testing is, you cant read about them in great detail here

Wrapping Up

This is the overall synopsis of creating components in Angular. So far, we have learned to create components and understood the basic meanings and reasons behind the generation of multiple files within the same component. That’s all for the first part of this tutorial. In the next part, we’ll discuss the default boilerplate code and learn how we can use our newly created component.