@mapsindoors/components
v13.23.0
Published
Web components for MapsIndoors
Downloads
4,276
Keywords
Readme
MapsIndoors Web Components
Stencil project with MI-Components
The library is published on NPM as: @mapsindoors/components
Read more about Stencil here: Getting started
Local development
In a terminal:
$ git clone [email protected]:MapsPeople/web-ui.git && cd web-ui
$ npm ci && npx lerna run build && cd packages/components
$ npm run start
When the server is up and running, open the project demo page in your browser: http://localhost:3000/
For "manually" controlling the components, open the Inspector to change attribute(s) in the HTML, or call methods via the developer console.
Getting started
MI Components as an NPM dependency in an Angular project
- Install the MapsIndoors components dependency with
npm install @mapsindoors/components
- Install the TypeScript definitions for Google Maps JavaScript API with
npm install @types/googlemaps
- Follow the instructions provided by Stencil to use a Stencil-built web component collection: https://stenciljs.com/docs/angular
Setting the element type
When getting a reference to a MI Component element in the view, the type can be set like so:
<mi-search #search mapsindoors="true" [placeholder]="Start typing to search..."></mi-search>
@ViewChild('search') miSearchComponent:
ElementRef<HTMLMiSearchElement>;
Docs
To check out the compiled Docs site, it's important to first build the components and then serve the documentation site:
npm run build
npm run docs.start
Open the browser on http://localhost:8000 to see the site running.
If you just want to build the Docs folder, run this command: npm run build && npm run docs.build