What’s the difference between an Angular Component and Module?

In this article, we will explore the Components & Modules in Angular, along with knowing the basic implementation & lastly, will know the differences between them.

Component: In Angular, a Component is a piece of code that represents a view. It is responsible for rendering the content and handling user interactions with the view. A Module is a container for a group of related components and directives. 

A Component is a class with an associated template that defines a view. A component controls a part of the screen called a view, which is defined by a class that controls the view through its template. The component class interacts with the view through an API of properties and methods exposed by the component. It is the most basic building block of an Angular application & they are the smallest standalone unit of an Angular application. These components will interact with the most when building the application. Components are defined using a class that controls the view through its template. The Component class is the logic behind the view, and it is responsible for handling user interactions, updating the data model, and interacting with other components or services.

Syntax:

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: "..."
  `
})
export class CounterComponent {
  code...
}

Example: The HTML code for an Angular component or module is typically split into two parts: the template and the class.

• counter.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

• counter.component.html

HTML

<button (click)="increment()">
  Increment
</button>
<div>{{ count }}</div>
<button (click)="decrement()">
  Decrement
</button>

• app.component.html

HTML

<div class="container">
  <h1>GeeksForGeeks</h1>
  <h3>
    Difference between Component and Module
  </h3>
  <app-counter> </app-counter>
</div>

• app.component.ts

HTML

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

Here’s what’s happening in this code:

• The @Component decorator is imported from the @angular/core module and is used to define the component’s metadata.
• The @Component decorator is applied to the CounterComponent class, and it takes an object as its argument. This object contains the component’s metadata, including the selector, template, templateUrl, styles, and styleUrls properties.
• The selector property is used to specify the element selector for the component. In this case, the component is selected with the app-counter tag.
• The template property is used to specify the component’s template, which defines the component’s visual structure and content.
• The templateUrl property can be used to specify the path to an external file that contains the component’s template.
• The styles and styleUrls properties can be used to specify the component’s styles.
• The CounterComponent class defines the component’s behavior. In this case, it includes two methods, increment() and decrement(), which are called when the corresponding buttons in the template are clicked. It also includes a property, count, which is used to store the current count value and is displayed in the template.
  

Module: Modules are a way to group related components and directives, along with the services, pipes, and other codes that they rely on, into a single cohesive unit. Modules provide a way to keep the code organized and make it easier to reuse components and directives across different parts of the application. Modules are defined using the Angular NgModule decorator, which takes an object that specifies the components, directives, and other code that the module contains. 

Syntax:

import { NgModule } from '@angular/core';
import { Components } from './counter.component';

@NgModule({
  declarations: [Components],
  imports: [],
  exports: [Components]
})
export class CounterModule { }

Example: In this example, the template for the module is a simple HTML file. The app-counter element is a custom element that represents the CounterComponent and it is defined in the module class. The module class is defined using the NgModule decorator, which takes an object that specifies the components, directives, and other code that the module contains. In this example, the declarations array lists the CounterComponent as a part of the module, and the bootstrap array specifies the CounterComponent as the root component that will be bootstrapped when the module is bootstrapped.

• counter.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { CounterComponent }
    from './counter.component';

@NgModule({
  declarations: [CounterComponent],
  exports: [CounterComponent]
})
export class CounterModule { }

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CounterComponent } from
    './counter/counter.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent,
                   CounterComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Here’s what’s happening in this code:

• The @NgModule decorator is imported from the @angular/core module and is used to define the module’s metadata.
• The @NgModule decorator is applied to the CounterModule class, and it takes an object as its argument. This object contains the module’s metadata, including the declarations, imports, and export properties.
• The declarations property is used to specify the components and directives that belong to the module. In this case, the CounterComponent is included in the declarations array.
• The imports property is used to specify other modules that the current module depends on. In this case, since there is no other module being imported, the array is empty.
• The exports property is used to specify the components and directives that should be available for use by other modules. In this case, the CounterComponent is included in the exports array, making it available for use by other modules.

Project Structure:

Output: The following output will be displayed for counter using component and module:

Difference between Component & Module in Angular:

Component	Module
A component is a class with an associated template that defines a view.	A module is a container for a group of related components and directives.
A component is responsible for rendering a view and handling user interactions with the view.	A module can contain services, pipes, and other code that is used by the components that are a part of the module.
A component is defined using a class and a template.	A module is defined using the Angular NgModule decorator.
A component controls a part of the screen called a view.	A module provides a way to group related functionality and keep the code organized.
A component can interact with other components or services.	A module can contain multiple components and directives.