You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -1280,6 +1280,73 @@ export class Sibling2Component {
1280
1280
1281
1281
[Back to top⤴️](#table-of-contents)
1282
1282
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.
- **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
+
1283
1350
## Data binding
1284
1351
1285
1352
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:
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.
- **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
-
5477
5477
## Angular Signals
5478
5478
5479
5479
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