In order to create an Angular element, we need to have a separate application, and not a library, since an Angular element has to be packaged along with Angular core, polyfills, and so on.
Let's create a new application called bulma-elements using the following command:
> ng generate application bulma-elements --prefix ba
? Which stylesheet format would you like to use? SASS(.scss) [ http://sass-lang ]
? Would you like to configure routing for this application? No
Now, let's create the component in our project using the following command:
> ng g c pagination --project bulma-elements
Let's add the functionality to our pagination.component.ts file:
import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
@Component({
selector: 'ba-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
@Input() pages = 0;
@Output() change = new EventEmitter();
currentPage = 1;
pageList;
constructor() { }
ngOnInit() {
this.makePageList(this.pages);
}
ngOnChange(changes: SimpleChanges) {
if (changes.pages && changes.pages.previousValue !==
changes.pages.currentValue) {
this.makePageList(changes.pages.currentValue);
}
}
makePageList(value) {
if (typeof value === 'string') {
value = parseInt(value, 10);
}
this.pageList = new Array(value).fill(0).map((_, i) => i + 1);
}
goTo(page: number) {
this.currentPage = page;
this.change.emit({
page,
});
}
}
Now, we'll use the HTML from the Bulma pagination and use our methods and properties from the PaginationComponent class:
<nav class="pagination" role="navigation" aria-label="pagination">
<button class="pagination-previous" (click)="goTo(currentPage - 1)"
[disabled]="currentPage === 1">Previous</button>
<button class="pagination-next" (click)="goTo(currentPage + 1)"
[disabled]="currentPage === pageList.length">Next page</button>
<ul class="pagination-list">
<li *ngFor="let page of pageList">
<a
class="pagination-link"
[ngClass]="{'is-current': currentPage === page}"
[attr.aria-label]="'Page ' + page"
[attr.aria-current]="page===currentPage ? 'page' :
undefined"
(click)="goTo(page)"
>
{{page}}
</a>
</li>
</ul>
</nav>
You can use the component in app.component.html, as follows:
<ba-pagination [pages]="3"></ba-pagination>
Now, let's serve our application using the following command:
> ng serve bulma-elements
You should be able to use the pagination component. Click on the Previous and Next page buttons, as well as the individual page buttons.
Now, let's install @angular/elements to convert the PaginationComponent into a custom element, using the following command:
> npm install @angular/elements
Next, we need to use the createCustomElement function from Angular Elements, as well as customElements, to define our new component as an Angular element. We also need to define the doBootstrap method, as follows:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { PaginationComponent } from './pagination/pagination.component';
import { createCustomElement } from "@angular/elements";
@NgModule({
declarations: [PaginationComponent],
imports: [BrowserModule],
entryComponents: [PaginationComponent],
providers: [],
})
export class AppModule {
constructor(injector: Injector) {
const el = createCustomElement(PaginationComponent, { injector });
customElements.define('ba-pagination', el);
}
ngDoBootstrap() { }
}
Let's also remove AppComponent from the imports and declarations of NgModule, and delete the app.component.ts file, as it will throw an error while compilation, if it didn't find AppComponent to be a part of any NgModule.
Now, let's build our application by using the following command, with no output hashing so that the bundles that are generated do not have a random string attached to them:
> ng build --prod --project bulma-elements --output-hashing none
Now, let's concatenate runtime.js, polyfills.js, and main.js into one file called bulma-elements.js using the cat command on macOS or copy command on Windows :
> cat dist/apps/bulma-elements/runtime-es2015.js dist/apps/bulma-elements/polyfills-es2015.js dist/apps/bulma-elements/main-es2015.js > dist/apps/bulma-elements/bulma-elements.js
Now, outside of our Nx application, let's create an index.html file and copy the bulma-elements.js file from the dist/apps/bulma-elements folder to the folder where you create the index.html file. Include the following HTML in the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
</head>
<body>
<ba-pagination pages="5"></ba-pagination>
<ba-pagination pages="3"></ba-pagination>
<script src="./bulma-elements.js"></script>
<script>
const el = document.querySelector('ba-pagination');
el.addEventListener('change', (e) => {
console.log(e);
});
</script>
</body>
</html>
Now, when you open the index.html file in your browser, you should see that the pagination component works, even in a Vanilla JS application.