@enquio/angular

Angular wrapper component for the Enquio popup Web Component. Provides an Angular-idiomatic interface to integrate Enquio popups into your Angular applications.

📦 Installation

npm install @enquio/angular

✅ Requirements

• Angular: >=15
• @angular/core: >=15
• @angular/common: >=15

🚀 Quick Start

Basic Usage (Standalone Component)

import { Component } from '@angular/core';
import { EnquioPopupComponent } from '@enquio/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [EnquioPopupComponent],
  template: `
    <div>
      <h1>My App</h1>
      <enquio-popup-wrapper [projectId]="'your-project-id'"></enquio-popup-wrapper>
    </div>
  `,
})
export class AppComponent {}

Using NgModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { EnquioPopupComponent } from '@enquio/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, EnquioPopupComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>My App</h1>
      <enquio-popup-wrapper [projectId]="projectId"></enquio-popup-wrapper>
    </div>
  `,
})
export class AppComponent {
  projectId = 'your-project-id';
}

Dynamic Project IDs

import { Component, OnInit } from '@angular/core';
import { EnquioPopupComponent } from '@enquio/angular';

@Component({
  selector: 'app-projects',
  standalone: true,
  imports: [EnquioPopupComponent],
  template: `
    <div>
      <div>
        <label for="project-select">Select Project:</label>
        <select [(ngModel)]="selectedProjectId" id="project-select">
          <option *ngFor="let proj of projects" [value]="proj.id">
            {{ proj.name }}
          </option>
        </select>
      </div>
      <enquio-popup-wrapper [projectId]="selectedProjectId"></enquio-popup-wrapper>
    </div>
  `,
})
export class ProjectsComponent implements OnInit {
  projects = [
    { id: 'proj-1', name: 'Project 1' },
    { id: 'proj-2', name: 'Project 2' },
    { id: 'proj-3', name: 'Project 3' },
  ];

  selectedProjectId: string = '';

  ngOnInit(): void {
    this.selectedProjectId = this.projects[0].id;
  }
}

📖 API

EnquioPopupComponent

An Angular component that renders the Enquio popup Web Component.

Selector

enquio-popup-wrapper

Note: The selector uses -wrapper suffix to avoid collision with the external enquio-popup Web Component.

Inputs

| Input | Type | Required | Description | |-------|------|----------|-------------| | projectId | string | Yes | Your Enquio project ID |

Example

<enquio-popup-wrapper [projectId]="'abc-123-def-456'"></enquio-popup-wrapper>

🔧 Advanced Usage

ViewChild to Access the Element

Multiple Popups

You can use multiple EnquioPopupComponent instances:

import { Component } from '@angular/core';
import { EnquioPopupComponent } from '@enquio/angular';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [EnquioPopupComponent],
  template: `
    <div>
      <section>
        <enquio-popup-wrapper [projectId]="'project-1'"></enquio-popup-wrapper>
      </section>
      <section>
        <enquio-popup-wrapper [projectId]="'project-2'"></enquio-popup-wrapper>
      </section>
    </div>
  `,
})
export class DashboardComponent {}

📝 License

MIT © Enquio Team