This article is a continuation of the first part of Understanding Components in Angular. In this article, we will dive deep into exploring each file that was generated when we created the component using ng generate command. If you haven’t already visited the first part of this article, make sure to give it a read before continuing with this article. This article will make strong connections and thorough references with the previous part. Moreover, we will use the same example of a component that we created in the previous part. 

Without further delays, let’s resume from where we earlier left off. 

Component File Structure

Are you familiar with the above image? You must be! These are the same files which we broadly discussed in the previous part. Now, we will open these files and try to understand the default boilerplate code provided by Angular in them. 

Let’s explore each of these files one by one. 

1. my-first-component.component.html

In the my-first-component.component.html file, we can see the following piece of default code. 

<p>my-first-component works!</p>

Such a small piece of code, no? Well, that’s exactly the beauty of component-based development. This component is not concerned with the overall application. It does not care about how the application is maintaining rest of its structure and flow. It is only concerned about its internal flow and execution. This is the only reason why we see such a small piece of default code in this component as compared to the overall application’s code.  

But what does this little code piece do? For now, it just displays an HTML paragraph within the component’s region with my-first-component works! as the inner text.

We can customise this component in whichever way we like as per the application’s needs and requirements. For now, let’s leave it as it is and move forward to the next step. I hope you understood the basic idea behind this file. 

2. my-first-component.component.scss

Let’s open this file and see what we have inside. Oops! This file is empty. But why? Is this file not important? If it is not important then why Angular has created it for us? Well, this file is empty indeed but it doesn’t mean that it is any less important. It’s just that, by default, Angular did not provide any styling for this particular component that we recently generated. We can always write our own style rules in this file. 

One interesting thing to note here is that all the rules that we define in this file are accessible only in this component locally. If we try to use the rules defined in this component somewhere else in the application, it would not work. Again this is the ease of development and segregated application architecture that Angular provides in order to write readable, manageable and maintainable code. 

3. my-first-component.component.ts

This is the most important file to understand if we want our application to respond to dynamic user behaviours. Let’s first look at what we have inside this file. 

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})
export class MyFirstComponentComponent implements OnInit {
constructor() { }
ngOnInit(): void {
  }
}

“Hey, Emad! It’s too much fuzzy stuff going in there. What does all that mean?”

I hear you. These were my words as well when I started learning Angular but trust me it’s not that difficult. Once we look step by step what each line is doing in above code snippet, it will be much easier to understand.

Understanding the Code

In line 1, we are importing two extremely important entities from @angular/core. The Component is a decorator that has certain properties in itself. Using this decorator above any class forces that class to behave like an official Angular component. The OnInit is an interface with just one function named ngOnInit(). We must provide a declaration to this function if we inherit any class from this interface to avoid compile-time error due to non-declaration of this function. 

From line 3 to 7, we are using the Component decorator because we want the class MyFirstComponentComponent to behave like an Angular component. Inside this decorator, we are defining the properties that it expects. The templateUrl enables the class to know the location of HTML file which this component will use for rendering. Similarly, styleUrls provides the location of SCSS files to the class. Note that templateUrl expects a string because there must only be one HTML file associated with the current component whereas styleUrls expects an array because we can distribute our style rules in as many files as we want and the component should be able to apply all those rules while rendering. 

Moving on to line 8, here we are actually declaring the class MyFirstComponentComponent and inheriting it from the OnInit interface. This inheritance allows us to define the ngOnInit() function which we can utilize whenever our component gets loaded in the application. Note that there is an export keyword before the class declaration. This keyword allows the global usage of this class (as a component) in entire application which means that we can import this component in any file throughout the application. If we don’t export it, we will not be able to import it in any other file. 

Line 10 is simply the class constructor and lines 12–13 are the declaration of ngOnInit() function which is coming from the OnInit interface. 

4. my-first-component.component.spec.ts

We have already discussed this file in much detail in the previous part. The file my-first-component.component.spec.ts contains all the code related to unit testing of this component. We’ll discuss the code in this file in a great detail when we talk about unit testing. For now, we can leave it as it is! 

Wrapping Up

That was all about it. I hope after reading this article, you have some idea about components in Angular. Add your custom code to each of these files to see how the component responds to your changes. 

Feel free to write in the comment section in case of any confusion or queries. If you wish to learn more about Angular, you can check out our collection of Angular tutorials.