@nonconforme/stencil-smarttag

@stencil/smarttag

This package is used to integrate smarttag to your Stencil component.

First, npm install within the project:

npm install @nonconforme/stencil-smarttag --save

Stencil component

First, you need to import the stencil-smarttag module into your StencilJS component.

import { AddsmarttagConfiguration, Displaysmarttag, Detectsmarttag } from '../../../node_modules/@nonconforme/stencil-smarttag/dist/index';

Next, you have to load the smarttag css to your @Component.

@Component({
  tag: 'my-component',
  styleUrls: [
    '../../../node_modules/@nonconforme/stencil-smarttag/dist/css/smarttag-position.scss'
  ]
})

Next, you have to load the smarttag detection method with an interval timeout. This interval was used to check when smarttag script finished his dom injection.

componentDidLoad() {
    // Detect smarttag script
    Detectsmarttag(2000);
    // Add smarttag configuration
    AddsmarttagConfiguration(6, environment.smarttag_id, 'smarttagConfig');
}

Next, smarttag was hidden by default. To display the smarttag icon there is a boolean method that display or hide the smarttag div by using css "display" property. You must pass the div ID of your smarttag div.

openClosesmarttag() {
    // Open or close smarttag
    Displaysmarttag('smarttagServiceDivID');
}

Related

• Nonconforme
• Stencil

Contributing

Please see our Contributor Code of Conduct for information on our rules of conduct.