Angular is an framework for building SPA and hybrid applications.
with Angular, You can create Angular components, Which you can use it only in Angular application and Each component you created in angular application is a straightforward way to use it.
Suppose, How to use the
Angular component in nonangular applications like any Java frontend or php or ruby on rails application.
It is possible with using Angular custom elements and web components.
Angular elements are introduced from Angular 6 version onwards.
What are Angular custom web elements?
Angular elements are normal angular components that also called web components, that packaged and shiffed as minified version to use in other applications
Custom elements are like a normal html or DOM elements which wrapper entire functionality in a single element.
Angular elements are custom components that build as mini
These are also called Angular web components.
Angular custom web elements are simple way of using minified angular version in any web applications.
@angular/elements package to make custom web components elements
For example,Angular custom elements can be used as follows
why angular elements
There are many advantages of using angular elements
- Angular elements are nothing but components, So can be packaged and used in non-angular applications.
- These are reusable, develop single component and reuse it in multiple applications independently.
- You can add angular elements to server side code
- You can still use angular elements in angular applications
Create Angular project with angular 12 version
First check angular cli is installed or not, If not installed, install latest angular cli using below command.
npm install -g @angular/cli
First Create an angular application using ng new command
ng new angular-elements-example
This creates an initial angular application structure and installs dependencies as seen below
How to build elements
Here is an command to run build angular elements
npm run build:elements
Sharing data between
data can be passed between each elements using @input and @output tags like a angular components.
As angular elements are used inside an parent components or of different container
It supports all browsers natively
angular element Errors
When you are working angular elements, You will get an errors
Cannot find module ‘@angular/elements’ : error
This error throws accessing elements code without installation @angular/elements package in your application.
@angular/elements using npm install command
npm install @angular/elements
This will installs latest @angular/elements in your application
Difference between Angular elements with Stencil.js
StencilJs also used to create a web components
Let’s see the difference between angular elements with StencilJs
|It is built by Angular team from Google||It is built by team behind Ionic framework|
|Angular elements are used to create web components||StencilJS also used to create web components with all features|
|Output of bundled with this is more||Size is less for bundled size compared with elements|
|It uses Angular framework with typescript||Uses React framework with typescript programming language|
|Minification of angular framework||Very fast and lightweight|