Step by Step for Creating First Angular Element with
Example -
What's
Angular Elements?
Angular Element is a package which is part of the
Angular framework- @angular/elements and it was introduced in Angular 6 and hopefully, this will improve with Angular 7 or higher versions.
Angular Elements was the brainchild of Angular’s
and it one of the most anticipated features of Angular 6 release. Explore in detail about Angular Elements …
Now
come to – “How to Create a Custom Angular Elements?”
There are following steps involving to Creating Custom Elements.
1.
Install Angular 6 platforms and Angular CLI,
if not installed.
2.
Create a new project using Angular CLI.
3.
Once successfully created your new project,
change the directory of your created.
4.
Install Angular elements.
5.
Install web components custom elements.
6.
Create your reusable component and it will
be used as an Angular Element.
7.
Register your comments which are required
like reusable components, Injector, and createCustomElement.
8.
Use the created custom element in your app.
9.
Result
Steps
1
- Install Angular 6, if not install.
Steps
2
– Create a new project using Angular CLI
ng new
ngprod
In the above command, the “ngprod” is the name of my project
which I used to create this demo.
Steps
3
- Once successfully created your new project, change the directory of your created
project just like - ngprod.
Steps
4
- Now install Angular elements using the below CLI command.
npm
install @angular/elements
Steps
5
- Once done the web components custom elements, install
npm
install @webcomponents/custom-elements
This will work for older browsers and also we will need
to open and add below two lines in your project file - polyfills.ts.
* APPLICATION IMPORTS */
import
'@webcomponents/custom-elements/src/native-shim';
import
'@webcomponents/custom-elements/custom-elements.min';
Steps
6
- Create your reusable component and it will be used as an Angular Element.
In this example, I have created a custom element for displays
the list of active users (active-user.component.ts and
active-user.component.html) and my created component contains the list of
activeUsers, applications access user name, and title.
active-user.component.ts -
import
{ Component, OnInit,
Input } from
'@angular/core';
@Component({
selector: 'app-activeuser',
templateUrl: './active-user.component.html',
styleUrls: ['./active-user.component.css']
})
export
class ActiveUserComponent
implements OnInit
{
public activeUsers
:any;
public title
:any;
@Input() user:
string;
constructor() {
this.title
='Angular - Create Custom Elements';
}
ngOnInit() {
this.activeUsers
= [
{"name"
:"Anil Singh"},
{"name"
:"Alok Singh"},
{"name"
:"Dilip Singh"},
{"name"
:"Sunil Singh"},
{"name"
:"Aradhya Singh"},
{"name"
:"Reena Singh"}
];
}
}
And active-user.component.html
-
<h1>{{title}}</h1>
<h2>You
are welcome, {{user}}!</h2>
<h4>Active
Users - </h4>
<div>
<table
*ngFor="let
user of activeUsers; let i = index;" width="40%">
<tr><td
width="5%">#{{i
+1}}</td><td
width="30%">{{user.name}}</td></tr>
</table>
</div>
Steps
7
- Register the active-user.component in the app.module.ts.
import
{ ActiveUserComponent
} from './active-user/active-user.component';
And comment the line - bootstrap ( //bootstrap: [AppComponent]) from the NgModule
class.
And also added the line - entryComponents
(entryComponents: [ActiveUserComponent]) in the NgModule.
See in the below code.
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ NgModule, Injector
} from '@angular/core';
import
{ FormsModule } from
'@angular/forms';
import
{ RouterModule, Routes
} from '@angular/router';
import
{ AppComponent } from
'./app.component';
import
{ UserComponent } from
'./user/user.component';
import
{ UserListComponent
} from './user-list/user-list.component';
import
{DataTableModule} from
"angular-6-datatable";
import
{ ActiveUserComponent
} from './active-user/active-user.component';
import
{ createCustomElement
} from '@angular/elements';
@NgModule({
declarations: [
AppComponent,
UserComponent,
UserListComponent,
ActiveUserComponent
],
imports: [
BrowserModule,
DataTableModule,
FormsModule,
RouterModule.forRoot([
{ path: 'user-link',
component: UserComponent
},
{ path: 'user-list',
component: UserListComponent
}
])
],
providers: [],
// bootstrap: [AppComponent],
bootstrap: [],
entryComponents: [ActiveUserComponent]
})
export
class AppModule
{
}
Steps
8
- Register the Injector and createCustomElement in the app.module.ts.
import
{ NgModule, Injector
} from '@angular/core';
import
{ createCustomElement
} from '@angular/elements';
After register the required modules in the
app.module.ts, we will need to create custom element in the AppModule.
See in the below code.
export
class AppModule
{
//An instance of the element is created or
upgraded.
constructor(private
injector: Injector)
{
//The customElements is used for defining a custom
element globaly.
const customElement
= createCustomElement(ActiveUserComponent,
{ injector });
//Defining a new element
customElements.define('app-activeuser',
customElement);
}
ngDoBootstrap() {}
}
And the app.module.ts looks like –
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ NgModule, Injector
} from '@angular/core';
import
{ FormsModule } from
'@angular/forms';
import
{ RouterModule, Routes
} from '@angular/router';
import
{ AppComponent } from
'./app.component';
import
{ UserComponent } from
'./user/user.component';
import
{ UserListComponent
} from './user-list/user-list.component';
import
{DataTableModule} from
"angular-6-datatable";
import
{ ActiveUserComponent
} from './active-user/active-user.component';
import
{ createCustomElement
} from '@angular/elements';
@NgModule({
declarations: [
AppComponent,
UserComponent,
UserListComponent,
ActiveUserComponent
],
imports: [
BrowserModule,
DataTableModule,
FormsModule,
RouterModule.forRoot([
{ path: 'user-link',
component: UserComponent
},
{ path: 'user-list',
component: UserListComponent
}
])
],
providers: [],
// bootstrap: [AppComponent],
bootstrap: [],
entryComponents: [ActiveUserComponent]
})
export
class AppModule
{
//An instance of the element is created or
upgraded.
constructor(private
injector: Injector)
{
//The customElements is used for defining a custom
element globaly.
const customElement
= createCustomElement(ActiveUserComponent,
{ injector });
//Defining a new element
customElements.define('app-activeuser',
customElement);
}
ngDoBootstrap() {}
}
Steps
9
- Use the created custom element in your app.
<body>
<!-- <app-root></app-root> -->
<app-activeuser
user="Anil
Singh"></app-activeuser>
</body>
Note -
I am using created custom element in the - index.html page.
Result
looks like -
Conclusion –
An Angular Custom element gives you a new tool for
defining new HTML tags in the browsers and creating reusable components.