easyFrontend

What are components and modules in Angular?

Q: What are components and modules in Angular?

**Core concept.** A **component** controls a piece of the screen — it's a TypeScript class decorated with @Component that ties together a **template** (HTML), **styles**, and logic. A **module** ( @NgModule ) groups related components, directives, and pipes plus their dependencies into a cohesive block. Modern Angular increasingly favours **standalone components**, which need no NgModule. @NgModule (declarations + imports) @Component template + class + styles<

509 views

Understand the problem

Describe the role of components and NgModules.

componentsmodules

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A component and the module that declares it

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-greeting',
  template: '<h3>Hello, {{ name }}!</h3>',   // template + binding
})
export class GreetingComponent {
  name = 'Angular';                          // component state
}

@NgModule({
  declarations: [GreetingComponent],         // module groups the component
  imports: [BrowserModule],
})
export class AppModule {}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you configure dynamic base href in Angular builds for different environments?

What is Angular and how does it differ from AngularJS?