📖
Documentación pública
Developers 🇪🇸
Developers 🇪🇸
  • 👋Bienvenido
  • ‼️Consideraciones
  • ☝️Conceptos
  • SDKs
    • 📞Phone
      • Métodos
      • Eventos
      • Demo
    • 📹WebRTC
      • Métodos
    • 📄Formularios
    • 🤖Captcha
    • ✨Ejemplos
      • Segmento como agente
    • 📂Intercambio archivos
      • Métodos
      • Eventos
      • Propiedades
      • BeamPortFile
    • 📅Calendario
      • Métodos
      • Eventos
      • Propiedades
    • 🔇Cancelación de ruido
      • Métodos
      • Propiedades
  • Componentes web
    • 📹WebRTC
      • Slots
      • Propiedades
      • Métodos
      • Eventos
    • 🗃️Fileshare
      • Slots
      • Propiedades
      • Métodos
      • Eventos
  • Widgets
    • 🔌Instalación
      • Google Tag Manager
      • WordPress
      • Cloudflare
    • 🖌️Personalización
      • Posición del widget
      • Burbuja personalizable
    • 🔗Acciones por URL
    • 🛰️API
      • Introducción
      • Variables globales
      • Propiedades
      • Métodos
      • Eventos
      • Ajustes
      • Forzar segmentos
      • Forzar calendarios
  • Seguridad
    • 🔐SSL
    • 💆‍♀️Cabeceras
    • ⛔Firewall
      • 🖇️Tipos de NAT
    • 🖼️Iframes
  • 🖇️Integraciones
    • Kioskos
    • Frameworks
      • Angular
  • 🎆Webhooks
    • 👓Introducción
    • 🔒Seguridad
    • 🦱Variables
    • 🦰Sintaxis
    • 🤟Helpers
      • parser
      • toLowerCase
      • toUpperCase
      • #if
      • #each
      • #array
      • #object
      • #isEqual
      • #isNot
      • #includes
      • #greater
      • #lower
      • #some
      • #every
      • #filter
      • #concat
      • #find
      • #get
      • #date
      • #relative
      • #url-param
      • #jwt
      • #phone
    • 🎛️Integraciones
      • Power BI
      • Airtable
    • 🐞Errores
    • 🔌Integradores (3rd party)
    • 💱Formatos locales
    • 🫱Ejemplos
      • Formularios
  • 🐞Depuración
    • Devtools
    • WebRTC
  • 📹Grabaciones
    • Cloud
      • Tamaños y resolución
      • Seguridad
      • Metadata
      • AWS S3
      • Azure
      • GCP
      • SFTP
    • Local
      • Ubicación de descargas
      • Google Drive / FileStream
      • AWS S3
  • API pública
    • Autorización
    • Segmentos
    • Calendario
    • Encuestas
    • Formularios
    • QMS
  • Exportación
    • Llamadas
    • Filas
    • Metadatos
    • Comentarios
    • Etiquetas
    • Reuniones
    • Grabaciones
    • Tópicos IA
    • Sentimientos IA
    • Formularios
    • Encuestas
  • Apps
    • Introducción
    • Integraciones
      • Power Apps
Con tecnología de GitBook
En esta página
  • Single App
  • Microfrontend
  • Declarar componente web

¿Te fue útil?

Editar en GitHub
  1. Integraciones
  2. Frameworks

Angular

Cómo usar nuestros kit de desarrollo o SDK con Angular.

Los métodos de integración en Angular dependerán en gran medida de la versión y arquitectura, por lo que los ejemplos a continuación se centrarán en máxima eficiencia en la importación y disponibilidad a través del código.

Single App

En caso que estés desarrollando con Angular como SPA, te sugerimos añadir nuestros SDKs como dependencias JS en el archivo index.html.

<head>
  ...
  <script src="https://cdn.videsk.io/sdk/webrtc.min.js"></script>
  ...
</head>

Microfrontend

Si estás desarrollando con Angular basado en arquitectura microfrontend, la mejor forma es crear un archivo scripts.js o dependencies.js que contenga las importaciones necesarias.

De esta manera, podrás importar las dependencies con tree-shaking, y el archivo bundle excluirá las dependencias las cuales cargarán solo cuando sean necesarias.

scripts.js
import WebRTC from 'https://cdn.videsk.io/sdk/webrtc.min.js';
import Calendar from 'https://cdn.videsk.io/sdk/calendar.min.js';

export { WebRTC, Calendar };
app.component.ts
import { Component } from '@angular/core';
import { WebRTC, Calendar } from 'path/to/scripts.js';

@Component({
  selector: 'app-root',
  template: '<p>{{ message }}</p>',
})
export class AppComponent {
  message: string;

  constructor() {
    const webrtc = new WebRTC('JWT');
    const calendar = new Calendar();
  }
}

Declarar componente web

Para usar nuestros componentes web puedes crear un componente Angular dentro de tu aplicación y luego asociarlo a nuestro componente web.

Deberás cargar el componente desde nuestra CDN en tu index.html.

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

declare const WebRTC: any;

@Component({
  selector: 'app-videsk-webrtc',
  template: '<videsk-webrtc></videsk-webrtc>'
})
export class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    new WebRTC(accessToken);
  }
}
AnteriorFrameworksSiguienteIntroducción

Última actualización hace 2 años

¿Te fue útil?

🖇️