This is a step by step guide, how we can use a stencil component in a Angular app. For more details you can also check the official Framework integration guide.
This project is created with Angular Cli
I have created another framework integration guide to use stencil components
Using a Stencil built web component collection within an Angular CLI project is a two-step process. We need to:
- Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components.
- Call
defineCustomElements(window)
frommain.ts
(or some other appropriate place).
This example use the stencil component from the following project
Install it `npm install @ranjeetsinghbnl/product-mgmt-stenciljs`
Including the CUSTOM_ELEMENTS_SCHEMA
in the module to use the web components in the HTML.
Here is an example of adding it to AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
import the component in the main.js
file
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
applyPolyfills,
defineCustomElements as defineProductMgmtExp
} from '@ranjeetsinghbnl/product-mgmt-stenciljs/loader'
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineProductMgmtExp(window);
});
Now The components should then be available in any of the angular components.
Don't forgot to add CUSTOM_ELEMENTS_SCHEMA
in the module where you want to use stencil components
You can use it
<mf-product-view></mf-product-view>
<mf-product-cart></mf-product-cart>
To know more about the components. Please check the Product & Cart showcase example
Note: I have include the bootstrap 4 css to give style to the stencil components. They are open to design changes. Their is no style added to components which i have used in the showcase
npm install
ng serve
ng build --prod --environment=production
ng test
ng lint