This content originally appeared on Level Up Coding - Medium and was authored by Sunil Soundarapandian
One of the major features released with v14 of Angular is to build a standalone component without the need to import it in the NgModules. Existing applications can also be incrementally be adopted.
Note that this is still in developer preview mode which means that it might change before it is released as a stable version.
Importing inside a module
The following example is to showcase how you can import the standalone component inside an existing module. Let’s quickly create a new component with Angular cli
ng g c home-page --standalone=true
Note: I used a new option — standalone this will in return set a flag in component “standalone: true”.
Once generated, import the home-page component inside the app.module.ts like shown below:
imports: [AppRoutingModule] //app.module.ts
This method is useful while you are in the position of upgrading from earlier version of Angular and don’t want to refactor othe whole application. This is what I mentioned in the introduction that adoption of standalone components can be in incremental approach.
Import inside another component
This is the true form of standalone component and how it is intended to be imported. In this method the component is not declared inside any module but can be directly imported inside another component.
Let’s generate a standalone component using the following
ng g c standalone --standalone=true
Import the generated inside the component in the homepage component
@Component({
selector: 'app-homepage',
standalone: true,
imports: [StandaloneComponent],
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.scss']
})Flow diagram to show how import is done in different components
Demo Stackblitz
https://angular-14-standalone-component.stackblitz.io
GitHub Project
https://github.com/ssunils/angular-standalone-component
Level Up Coding
Thanks for being a part of our community! More content in the Level Up Coding publication.
Follow: Twitter, LinkedIn, Newsletter
Level Up is transforming tech recruiting ➡️ Join our talent collective
Introduction to Standalone Components with Angular 14 was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Sunil Soundarapandian
Sunil Soundarapandian | Sciencx (2022-06-27T21:36:34+00:00) Introduction to Standalone Components with Angular 14. Retrieved from https://www.scien.cx/2022/06/27/introduction-to-standalone-components-with-angular-14/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.