Ana içeriğe geç

Angular Kurulumu

Angular uygulamalarında @aithinks/chatbot-widget-element (Web Component) paketi kullanılır.

Custom element adı: chatbot-widget

Kurulum​

npm install @aithinks/chatbot-widget-element

Attributes​

AttributeTipZorunluAçıklama
appidstringEvetWidget uygulama kimliği (küçük harf)

Web Component attribute’ları küçük harfle yazılır (appid). React native bileşeninde prop adı appId’dir.

1. Custom Elements şemasını açın​

// app.module.ts (NgModule)
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Standalone component:

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

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<chatbot-widget [attr.appid]="appId"></chatbot-widget>`,
})
export class AppComponent {
  appId = 'YOUR_APP_ID';
}

2. Paketi uygulama girişinde import edin​

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

import '@aithinks/chatbot-widget-element';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

3. Template’de kullanın​

<!-- app.component.html -->
<chatbot-widget appid="YOUR_APP_ID"></chatbot-widget>

Dinamik binding:

<chatbot-widget [attr.appid]="appId"></chatbot-widget>
export class AppComponent {
  appId = 'YOUR_APP_ID';
}

Sık karşılaşılan durum​

“X is not a known element” — CUSTOM_ELEMENTS_SCHEMA eksiktir; ilgili NgModule veya standalone component’e ekleyin.

Sonraki adımlar​