This project show how using flip-div 3D component using [StencilJs] (https://stenciljs.com) in an Angular7 project, without import script.
This component made with StencilJs is tiny and have zero dependencies.
Follow this steps, in root folder:
- npm install
- npm build
- npm start
To run analyzer in dev and prod environment.
dev:
npm run build-analyzer
prod:
npm run build-prod-analyzer
And acessing http://127.0.0.1:8888
In app.module.ts
include CUSTOM_ELEMENTS_SCHEMA.
Before that you need register the component in you main.ts
.
import the ts loader of component
import { defineCustomElements } from 'flip-div/dist/loader';
Register component
defineCustomElements(window);
<flip-div height="300px" width="300px">
<card-item class-names="my-custom-class">
Front Item
<!-- Insert you html here -->
</card-item>
<card-item class-names="my-custom-class">
Back Item
<!-- Insert you html here -->
</card-item>
</flip-div>
This project was done with:
- node v11.2.0
- Angular CLI 7.0.7
- Angular 7.0.4
[StencilJs] (https://stenciljs.com)