Skip to content

Commit d5dd713

Browse files
committed
docs: Add section on Standalone Components with examples and usage guidelines
1 parent 79928d0 commit d5dd713

File tree

1 file changed

+68
-68
lines changed

1 file changed

+68
-68
lines changed

README.md

Lines changed: 68 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ This repository contains a list of resources to learn Angular. It includes tutor
4242
- [Component Communication](#component-communication)
4343
- [Parent to Child](#parent-to-child)
4444
- [Child to Parent](#child-to-parent)
45+
- [Standalone Components](#standalone-components)
4546
- [Data Binding](#data-binding)
4647
- [One Way Binding](#one-way-binding)
4748
- [Two Way Binding](#two-ways-binding)
@@ -114,7 +115,6 @@ This repository contains a list of resources to learn Angular. It includes tutor
114115
- [Title Service](#title-service)
115116
- [Dynamic Title](#dynamic-title)
116117
- [Meta Service](#meta-service)
117-
- [Standalone Components](#standalone-components)
118118
- [Angular Signals](#angular-signals)
119119
- [Security](#security)
120120
- [Preventing cross-site scripting (XSS)](#preventing-cross-site-scripting-xss)
@@ -1280,6 +1280,73 @@ export class Sibling2Component {
12801280

12811281
[Back to top⤴️](#table-of-contents)
12821282

1283+
## Standalone Components
1284+
1285+
A standalone component is a type of component which is not part of any Angular module. It provides a simplified way to build Angular applications by reducing the need for NgModules. Standalone components are self-contained and declare their own dependencies.
1286+
1287+
### Creating a Standalone Component
1288+
1289+
```typescript
1290+
import { Component } from '@angular/core';
1291+
import { CommonModule } from '@angular/common';
1292+
1293+
@Component({
1294+
selector: 'app-standalone',
1295+
standalone: true, // Mark as standalone
1296+
imports: [CommonModule], // Import required dependencies
1297+
template: `
1298+
<h1>Standalone Component</h1>
1299+
<p>This is a self-contained component</p>
1300+
`
1301+
})
1302+
export class StandaloneComponent {
1303+
// Component logic here
1304+
}
1305+
```
1306+
1307+
### Key Features of Standalone Components
1308+
1309+
- **Self-contained**: Declares its own dependencies through the imports array
1310+
- **No NgModule required**: Can be used without declaring in a module
1311+
- **Easier testing**: Simpler to test due to explicit dependencies
1312+
- **Better tree-shaking**: Enables more efficient bundle optimization
1313+
- **Simplified lazy-loading**: Can be lazy-loaded directly without module
1314+
1315+
### Using Standalone Components
1316+
1317+
```typescript
1318+
// Importing in another standalone component
1319+
@Component({
1320+
selector: 'app-parent',
1321+
standalone: true,
1322+
imports: [StandaloneComponent],
1323+
template: `
1324+
<app-standalone></app-standalone>
1325+
`
1326+
})
1327+
export class ParentComponent {}
1328+
1329+
// Bootstrapping a standalone component
1330+
import { bootstrapApplication } from '@angular/platform-browser';
1331+
1332+
bootstrapApplication(AppComponent, {
1333+
providers: [
1334+
// Root providers here
1335+
]
1336+
});
1337+
```
1338+
1339+
### Converting to Standalone
1340+
1341+
To convert an existing component to standalone:
1342+
1343+
1. Add `standalone: true` to the component decorator
1344+
2. Move dependencies from NgModule imports to component imports
1345+
3. Remove component declaration from NgModule
1346+
4. Import required dependencies directly in the component
1347+
1348+
[Back to top⤴️](#table-of-contents)
1349+
12831350
## Data binding
12841351

12851352
Data binding is a core feature of Angular that allows you to bind data between the component's class and the HTML template. There are two types of data binding in Angular:
@@ -5407,73 +5474,6 @@ this.metaService.removeTag("name='robots'");
54075474

54085475
[Back to top⤴️](#table-of-contents)
54095476

5410-
## Standalone Components
5411-
5412-
A standalone component is a type of component which is not part of any Angular module. It provides a simplified way to build Angular applications by reducing the need for NgModules. Standalone components are self-contained and declare their own dependencies.
5413-
5414-
### Creating a Standalone Component
5415-
5416-
```typescript
5417-
import { Component } from '@angular/core';
5418-
import { CommonModule } from '@angular/common';
5419-
5420-
@Component({
5421-
selector: 'app-standalone',
5422-
standalone: true, // Mark as standalone
5423-
imports: [CommonModule], // Import required dependencies
5424-
template: `
5425-
<h1>Standalone Component</h1>
5426-
<p>This is a self-contained component</p>
5427-
`
5428-
})
5429-
export class StandaloneComponent {
5430-
// Component logic here
5431-
}
5432-
```
5433-
5434-
### Key Features of Standalone Components
5435-
5436-
- **Self-contained**: Declares its own dependencies through the imports array
5437-
- **No NgModule required**: Can be used without declaring in a module
5438-
- **Easier testing**: Simpler to test due to explicit dependencies
5439-
- **Better tree-shaking**: Enables more efficient bundle optimization
5440-
- **Simplified lazy-loading**: Can be lazy-loaded directly without module
5441-
5442-
### Using Standalone Components
5443-
5444-
```typescript
5445-
// Importing in another standalone component
5446-
@Component({
5447-
selector: 'app-parent',
5448-
standalone: true,
5449-
imports: [StandaloneComponent],
5450-
template: `
5451-
<app-standalone></app-standalone>
5452-
`
5453-
})
5454-
export class ParentComponent {}
5455-
5456-
// Bootstrapping a standalone component
5457-
import { bootstrapApplication } from '@angular/platform-browser';
5458-
5459-
bootstrapApplication(AppComponent, {
5460-
providers: [
5461-
// Root providers here
5462-
]
5463-
});
5464-
```
5465-
5466-
### Converting to Standalone
5467-
5468-
To convert an existing component to standalone:
5469-
5470-
1. Add `standalone: true` to the component decorator
5471-
2. Move dependencies from NgModule imports to component imports
5472-
3. Remove component declaration from NgModule
5473-
4. Import required dependencies directly in the component
5474-
5475-
[Back to top⤴️](#table-of-contents)
5476-
54775477
## Angular Signals
54785478

54795479
Angular Signals is a powerful system that provides detailed monitoring of state usage within an application, enabling the framework to efficiently optimize rendering updates.

0 commit comments

Comments
 (0)