Standalone components were introduced in Angular 14 and should be used instead of modules for every new component you create.
There is a number of advantages of using standalone components over modules as they:
- Reduce the amount of boilerplate code. They don't belong to a particular NgModule and don't have to be declared, so can be used in any part of the application
- Streamline component creation
- Allow to lazy-load the component without using an NgModule
- Flatten the learning curve for new developer as the concept of NgModules is off the table
To make a component standalone, set standalone: true
@Component({
standalone: true,
selector: "my-component",
imports: [FooComponent],
template: `
...
<foo-component></foo-component>
`,
})
export class MyComponent {
// component logic
}