1. How Do You Create a Component Using Angular CLI?

What is it?

Angular CLI provides a command to automatically generate an Angular component with the required files and basic component configuration.

Instead of manually creating the TypeScript, HTML, and CSS files, Angular CLI creates them for you.

Why Do We Need It?

You can create a component manually, but Angular CLI is preferred because it:

• Creates the required files automatically.
• Generates the correct @Component structure.
• Follows Angular naming conventions.
• Reduces typing and configuration mistakes.
• Creates test files when configured/requested.
• Supports standalone components.

Purpose

The purpose of the Angular CLI component generator is to quickly create a correctly structured Angular component.

The basic command is:

ng generate component product

Short form:

ng g c product

Both commands perform the same operation.

Example

Run:

ng g c product

Depending on your Angular CLI configuration/version, it typically creates files such as:

src/app/product/
│
├── product.ts
├── product.html
├── product.css
└── product.spec.ts

With modern Angular CLI naming conventions, the generated class can look like:

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

@Component({
  selector: 'app-product',
  imports: [],
  templateUrl: './product.html',
  styleUrl: './product.css'
})
export class Product {

}

Modern Angular generates standalone components by default. You may not see standalone: true explicitly because standalone is the default in current Angular versions.

Command Explanation

Consider:

ng generate component product

ng

Runs Angular CLI.

generate

Tells Angular CLI to generate something.

Angular CLI can generate many artifacts, such as:

ng generate component
ng generate service
ng generate directive
ng generate pipe
ng generate guard

component

Specifies that we want to generate a component.

product

Specifies the component name.

Therefore:

ng generate component product

means:

Angular CLI, generate a component named product.

Short Command

Instead of:

ng generate component product

we normally use:

ng g c product

Where:

g = generate
c = component

Creating a Component Inside a Folder

For example:

ng g c products/product-list

This creates the component under the specified path:

src/app/
│
└── products/
    └── product-list/
        ├── product-list.ts
        ├── product-list.html
        ├── product-list.css
        └── product-list.spec.ts

This is useful for organizing larger applications.

Useful CLI Options

Skip Test File

If you don't want a .spec.ts test file:

ng g c product --skip-tests

Inline Template

Instead of creating a separate HTML file:

ng g c product --inline-template

Angular places the HTML inside the component:

@Component({
  selector: 'app-product',
  template: `<h2>Product</h2>`,
  styleUrl: './product.css'
})

Inline Style

ng g c product --inline-style

The CSS is placed inside the component:

@Component({
  selector: 'app-product',
  templateUrl: './product.html',
  styles: `
    h2 {
      font-weight: bold;
    }
  `
})

No Separate Folder

Normally, you may want the component files directly in the current target folder:

ng g c product --flat

Instead of:

app/
└── product/
    ├── product.ts
    ├── product.html
    └── product.css

you get:

app/
├── product.ts
├── product.html
└── product.css

Advantages

• Faster than manual component creation.
• Follows Angular conventions.
• Reduces human errors.
• Automatically generates boilerplate code.
• Supports folders and configuration options.
• Convenient for large applications.

Disadvantages

• Developers need to learn CLI commands and options.
• Generated files may need additional cleanup/customization.
• Blindly generating components can lead to unnecessary components or poor project organization.

Key Points

• Use Angular CLI to generate components.
• Full command:

ng generate component product

• Short command:

ng g c product

• Modern Angular uses standalone components by default.
• Current Angular CLI may generate simplified filenames such as product.ts rather than the older product.component.ts.
• --skip-tests prevents creation of the test file.
• --flat prevents creation of a separate component directory.

Interview Questions & Answers

Q1. How do you create an Angular component using Angular CLI?

Use:

ng generate component product

or the shorthand:

ng g c product

Angular CLI generates the component class, template, styles, and optionally the test file.

Q2. What does ng g c mean?

ng → Angular CLI
g  → generate
c  → component

Q3. How do you generate a component without a test file?

ng g c product --skip-tests

Q4. Can we create an Angular component manually?

Yes. You can manually create the TypeScript, HTML, and CSS files and configure @Component, but Angular CLI is generally preferred because it is faster and follows Angular conventions.

2. What Is the Purpose of the @Component Decorator?

What is @Component?

@Component is an Angular decorator used to mark a TypeScript class as an Angular component and provide Angular with metadata describing how that component should work.

Example:

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

@Component({
  selector: 'app-product',
  templateUrl: './product.html',
  styleUrl: './product.css'
})
export class Product {

}

The important relationship is:

@Component
     │
     │ provides metadata
     ▼
TypeScript Class
     │
     ▼
Angular Component

Without the @Component decorator, Product is simply a normal TypeScript class.

Why Do We Need @Component?

Consider this:

export class Product {
  productName = 'Laptop';
}

This is only a normal TypeScript class.

Angular doesn't have component metadata telling it things such as:

• What HTML template belongs to this class?
• What styles belong to it?
• What selector represents it?
• What dependencies does its template require?
• How should Angular treat this class?

We provide this information through:

@Component({
   ...
})

Purpose

The main purpose of @Component is to provide Angular with metadata about a component.

For example:

@Component({
  selector: 'app-product',
  imports: [],
  templateUrl: './product.html',
  styleUrl: './product.css'
})
export class Product {

}

Here Angular can understand:

Product
   │
   ├── Selector  → app-product
   ├── Template  → product.html
   ├── Style     → product.css
   └── Imports   → Component dependencies

Code Sample

product.ts

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

@Component({
  selector: 'app-product',
  imports: [],
  templateUrl: './product.html',
  styleUrl: './product.css'
})
export class Product {

  productName = 'Laptop';
  price = 50000;

  buyProduct() {
    alert('Product purchased');
  }
}

product.html

<h2>{{ productName }}</h2>

<p>Price: ₹{{ price }}</p>

<button (click)="buyProduct()">
  Buy
</button>

product.css

h2 {
  font-weight: bold;
}

Code Explanation

Import Component

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

Component is imported from Angular's core package.

@Component

@Component({
})

The decorator tells Angular:

Treat the following TypeScript class as an Angular component.

selector

selector: 'app-product'

Defines how the component can be referenced in HTML.

<app-product></app-product>

Angular recognizes this selector and renders the component.

templateUrl

templateUrl: './product.html'

Specifies the HTML template associated with the component.

styleUrl

styleUrl: './product.css'

Specifies the component's stylesheet.

imports

imports: []

For a standalone component, this contains the components, directives, pipes, or Angular features required by its template.

For example:

import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-product',
  imports: [CurrencyPipe],
  templateUrl: './product.html'
})
export class Product {
  price = 50000;
}

Then:

<p>{{ price | currency:'INR' }}</p>

How @Component Works Conceptually

When Angular processes:

@Component({
  selector: 'app-product',
  templateUrl: './product.html',
  styleUrl: './product.css'
})
export class Product {
  productName = 'Laptop';
}

Angular gets both configuration and behavior:

                @Component Metadata
                       │
       ┌───────────────┼───────────────┐
       ▼               ▼               ▼
    selector         template         style
       │               │               │
       └───────────────┼───────────────┘
                       ▼
                  Product Class
                       │
                       ▼
               Angular Component
                       │
                       ▼
                      UI

@Component vs Normal TypeScript Class

Normal Class

export class Product {
  name = 'Laptop';
}

Angular does not treat this as a UI component.

Angular Component

@Component({
  selector: 'app-product',
  template: `<h2>Product</h2>`
})
export class Product {
}

Now Angular knows that Product is a component and has the metadata necessary to render its view.

Common @Component Properties

You don't normally need all of these properties for every component.

Before Standalone Components

In traditional Angular applications, a component was usually declared inside an NgModule.

Component:

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

Then:

@NgModule({
  declarations: [
    ProductComponent
  ]
})
export class AppModule {
}

Modern Angular standalone components don't require that declarations registration.

Traditional Angular

@Component
     │
     ▼
Component
     │
     ▼
NgModule declarations


Modern Angular

@Component
     │
     ▼
Standalone Component
     │
     ├── imports its dependencies
     │
     ▼
Can be used without NgModule declaration

Advantages

• Clearly identifies a class as an Angular component.
• Connects the TypeScript class with its HTML template.
• Connects component-specific styles.
• Defines how the component is used through selector.
• Supports component-level imports and providers.
• Keeps component configuration together in one place.

Disadvantages

There aren't major disadvantages to @Component itself because it is fundamental to Angular's component model. However:

• Component metadata can become large if too much configuration is placed there.
• Developers need to understand properties such as imports, providers, changeDetection, and encapsulation.
• Incorrect metadata configuration can cause compile-time or runtime/template errors.

Key Points

• @Component is imported from:

@angular/core

• It converts/marks a normal TypeScript class into an Angular component by supplying component metadata.
• The metadata describes how Angular should create and use the component.
• selector defines how the component is referenced.
• template/templateUrl defines its UI.
• styles/styleUrl defines its styling.
• imports specifies template dependencies for standalone components.
• Modern Angular components are standalone by default.
• @Component is a specialized Angular decorator for UI components.

Interview Questions & Answers

Q1. What is the purpose of @Component?

@Component marks a TypeScript class as an Angular component and provides metadata such as its selector, template, styles, imports, and other configuration.

Q2. What happens if we remove @Component?

The class becomes an ordinary TypeScript class. Angular no longer has the component metadata needed to treat it as a UI component.

Q3. What is component metadata?

Component metadata is the configuration supplied to @Component, for example:

@Component({
  selector: 'app-product',
  templateUrl: './product.html',
  styleUrl: './product.css'
})

It tells Angular how the component should be configured and rendered.

Q4. What is the difference between @Component and @NgModule?

@Component defines an individual UI component. @NgModule was traditionally used to group components, directives, pipes, and providers into Angular modules. Modern Angular applications primarily use standalone APIs, reducing the need for NgModule.

Q5. Is standalone: true mandatory in modern Angular?

In current Angular versions, standalone is the default, so you generally don't need to explicitly specify:

standalone: true

Older standalone-based Angular versions required or commonly generated it explicitly.

Q6. What is the simplest interview definition of @Component?

@Component is an Angular decorator that identifies a TypeScript class as a UI component and supplies Angular with metadata such as the selector, template, styles, and dependencies.