Understanding Angular Components

Angular Components

Angular components are the core components of Angular applications, containing templates, data, and behavior in reusable and modular parts. They consist of a TypeScript class and an HTML template that provide an organized approach to UI development within the Angular framework. Understanding Angular components is necessary for understanding Angular using resources such as Angular Certification Training and Angular Tutorials.

The Angular tutorial will provide you with complete guidance on what are the components in Angular?, Angular Components Page View, Angular Components Advantages, the Difference between Angular Components and Angular Directives, how do you create components in Angular, and many more.

What are the components in Angular?

Angular components are building blocks, which, in turn, form an Application. In simple language, think of our ecosystem as an Application. Then, water, temperature, oxygen, carbon dioxide, and many more biotic and abiotic factors make the whole ecosystem work as an application. Now, the same concept applies to our Angular application as well. Our app has many Angular components, such as a header, footer, and sidebar, which in turn results in an app.

Typically, it is a type of directive with templates, styles, and logic for user interaction. It is exported as a custom HTML tag like: <my-component></my-component>. The angular component is initialized by an angular dependency injection engine.

Angular Components Page View

A webpage containing an article with comments, categories, a news feed, and a header, the footer can be managed using the components in angular as given below:

Angular Component Advantages

Now, you all must be thinking, why should we use components in angular? The component inculcates many benefits in Angular itself. It provides:

1. Reusability

   • If the same functionality should be exposed in multiple places, then we can reuse it in all these places.
   • For example, we have two components, a header, and a footer, which should be included on the About Page and Contact Page. Then we need to add one tag (which we will cover later in this article), and your work is done!! You are not required to add a header and sidebar code in each place.
   • While working with single-page applications, one should bring the concept of re-usability of the Angular components, util functions templates, and other business logic files because it saves a lot of re-development time and results in better manageable code.

2. Testability

   • Angular components are self-contained, which makes them easy to test individually.
   • Dependency Injection allows for mocking services during testing, simplifying the process.
   • Angular’s TestBed provides tools that enable thorough and isolated component testing.

3. Consistency

   • Angular enforces a consistent structure across the entire application.
   • It ensures uniformity in code style and best practices.
   • Consistent patterns make it easier for teams to collaborate and maintain the project.

4. High Cohesion

   • Angular enforces a consistent structure across the entire application.
   • It ensures uniformity in code style and best practices.
   • Consistent patterns make it easier for teams to collaborate and maintain the project.

Difference between Angular Components and Angular Directives

Now, the folks familiar with Angular 1. x might be in a dilemma. What is the actual difference between Angular Components and Angular Directives? Right!

The major difference between both of them is Angular Directives add behavior to existing DOM elements while Angular Components create their view with attached behavior. Exploring an Angular course can delve deeper into this distinction between Angular Components and Angular Directives, offering comprehensive insights into their functionalities and applications within Angular development.

How do you create components in Angular?

There are two ways to create the Angular Components that are discussed below:

1. Creating The Angular Component by Angular CLI
2. Creating Angular Components Manually

1. Creating The Angular Component by Angular CLI

We are using Angular CLI to create the Angular Components. Here, we will discuss this in steps that will explained below:

Step-1. Open a terminal window and go to the directory where your program is located.

Step-2. Now, you should run the ng generate component <component-name> command, where <component-name> is the name of your new component.

After running this command, this will create some elements that are:

• A directory named after the component
• A component file, <component-name>.component.ts
• A template file, <component-name>.component.html
• A CSS file, <component-name>.component.css
• A testing specification file, <component-name>.component.spec.ts. Where <component-name> is the name of your component.

2. Creating Angular Components Manually

Next, the question that arises in our mind is how Angular identifies the Angular components among many other files. The answer is that if you open any ts file of the component, you will see @component metadata, and below it, there will be one class. The @component decorator is responsible for identifying the class as a component and for specifying its metadata.

• Now, let us move towards creating our first component. Initially, your app structure will look something like this:

Now, here is the first built-in component that you can see in the app. Now, looking at this, you can assume the basic structure of a component. It consists of 4 files: HTML, CSS, TS, SPEC.TS.

Our APP.COMPONENT.HTMLThe file looks like this:

This file has been created by Angular. It is the basic HTML file. If you run this app, the first page you’ll see as an output will have this HTML written there.

Next file is APP.COMPONENTS.TS:

As I have mentioned earlier, you can call component this at any other component by the selector.

TemplateURL depicts the corresponding HTML file for this TS file, and the last is styleUrls, which represents the styles used by this TS file. Note that this is an array. You can always mention more than one CSS file for one TS file.

Let me just highlight one phenomenon: if you want to use any component, call it by its selector name. Let's, for example, I want to use the demo component at the demo1 component; then I simply need to call the demo’s selector <app-demo></app-demo> (say, for example). This will render the demo's HTML at demo1's HTML.

Now, let us create our first component by firing the given below command:

ng g c component_name)

(g stands for generating and c stands for Component)

You can open this terminal using VS Code from (view -> Integrated terminal). As we have previously discussed, a component has 4 files inside it. One new message you'll see is regarding app.module.ts. It is the heart of our app. It contains the global declaration for all our Angular components. After creating a component, our app.module.ts will look like this:

Our component should be imported and added to the declaration array.

Nested Component

Now, if you want to see the task component’s HTML as your output. What would you do!? Remember that Selector concept? Yes, you have to add the task’s selector at APP.COMPONENT.HTML. (Because it is the first component that is being loaded by angular if you want to check how? Check your index.html, there you will find <app-root></app-root> which is a selector for the app component).

And here is your output in the browser, which shows the content written into the child component but nested from the parent component

And with this, we have learned a new concept called Nested Component. In the Nested component, we call one component inside another component. The component in which we have called another component is known as the Parent component, and the called component is known as Child or Nested component.

Conclusion

In conclusion, Angular components are the building blocks of the user interface. They combine HTML, CSS, and logic to create different parts of a web page. By using components, developers can easily create reusable and well-organized pieces of the application. Whether it’s small elements like buttons or large sections of a page, components make it simple to build and manage the app’s structure. To master yourself in .NET  Framework, Scholarhat provides you with the complete Full-Stack .NET Developer Certification Training Course for your career growth.

Take our Angular skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE