diff --git a/package.json b/package.json
index 6f84dbf..827066f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@docuseal/angular",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "DocuSeal Angular components to integrate documents signing process into apps. ✍️",
   "esm2022": "dist/esm2022/docuseal-angular.mjs",
   "esm": "dist/esm2022/docuseal-angular.mjs",
diff --git a/src/builder.component.ts b/src/builder.component.ts
index ff2c88b..9d5c6e2 100644
--- a/src/builder.component.ts
+++ b/src/builder.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ElementRef, HostListener, SimpleChanges } from "@angular/core"
+import { Component, Input, HostListener, HostBinding } from "@angular/core"
 
 interface DocusealField {
   name: string,
@@ -10,9 +10,7 @@ interface DocusealField {
 interface AfterViewInit {
   ngAfterViewInit(): void
 }
-interface OnChanges {
-  ngOnChanges(changes: SimpleChanges): void
-}
+
 @Component({
   selector: "docuseal-builder",
   standalone: true,
@@ -20,7 +18,7 @@ interface OnChanges {
   styles: []
 })
 
-export class DocusealBuilderComponent implements AfterViewInit, OnChanges {
+export class DocusealBuilderComponent implements AfterViewInit {
   @Input() token: string = ""
   @Input() host: string = "cdn.docuseal.co"
   @Input() language: string = "en"
@@ -49,140 +47,34 @@ export class DocusealBuilderComponent implements AfterViewInit, OnChanges {
   @Input() saveButtonText: string = ""
   @Input() customCss: string = ""
 
-  constructor(private el: ElementRef) {}
-
-  get attributes (): { [key: string]: any } {
-    return {
-      src: {
-        name: "data-token",
-        value: () => this.token
-      },
-      preview: {
-        name: "data-preview",
-        value: () => this.preview
-      },
-      language: {
-        name: "data-language",
-        value: () => this.language
-      },
-      autosave: {
-        name: "data-autosave",
-        value: () => this.autosave
-      },
-      sendButtonText: {
-        name: "data-send-button-text",
-        value: () => this.sendButtonText
-      },
-      saveButtonText: {
-        name: "data-save-button-text",
-        value: () => this.saveButtonText
-      },
-      roles: {
-        name: "data-roles",
-        value: () => this.roles.join(',')
-      },
-      fieldTypes: {
-        name: "data-field-types",
-        value: () => this.fieldTypes.join(',')
-      },
-      drawFieldType: {
-        name: "data-draw-field-type",
-        value: () => this.drawFieldType
-      },
-      fields: {
-        name: "data-fields",
-        value: () => JSON.stringify(this.fields)
-      },
-      i18n: {
-        name: "data-i18n",
-        value: () => JSON.stringify(this.i18n)
-      },
-      customButton: [
-        {
-          name: "data-custom-button-title",
-          value: () => this.customButton.title
-        },
-        {
-          name: "data-custom-button-url",
-          value: () => this.customButton.url
-        }
-      ],
-      withRecipientsButton: {
-        name: "data-with-recipients-button",
-        value: () => this.withRecipientsButton
-      },
-      withSendButton: {
-        name: "data-with-send-button",
-        value: () => this.withSendButton
-      },
-      withDocumentsList: {
-        name: "data-with-documents-list",
-        value: () => this.withDocumentsList
-      },
-      withFieldsList: {
-        name: "data-with-fields-list",
-        value: () => this.withFieldsList
-      },
-      withTitle: {
-        name: "data-with-title",
-        value: () => this.withTitle
-      },
-      onlyDefinedFields: {
-        name: "data-only-defined-fields",
-        value: () => this.onlyDefinedFields
-      },
-      withUploadButton: {
-        name: "data-with-upload-button",
-        value: () => this.withUploadButton
-      },
-      withSignYourselfButton: {
-        name: "data-with-sign-yourself-button",
-        value: () => this.withSignYourselfButton
-      },
-      backgroundColor: {
-        name: "data-background-color",
-        value: () => this.backgroundColor
-      },
-      customCss: {
-        name: "data-custom-css",
-        value: () => this.customCss
-      }
-    }
-  }
+  @HostBinding("attr.data-token") get dataToken(): string { return this.token }
+  @HostBinding("attr.data-preview") get dataPreview(): boolean { return this.preview }
+  @HostBinding("attr.data-language") get dataLanguage(): string { return this.language }
+  @HostBinding("attr.data-autosave") get dataAutosave(): boolean { return this.autosave }
+  @HostBinding("attr.data-send-button-text") get dataSendButtonText(): string { return this.sendButtonText }
+  @HostBinding("attr.data-save-button-text") get dataSaveButtonText(): string { return this.saveButtonText }
+  @HostBinding("attr.data-roles") get dataRoles(): string { return this.roles.join(',') }
+  @HostBinding("attr.data-field-types") get dataFieldTypes(): string { return this.fieldTypes.join(',') }
+  @HostBinding("attr.data-draw-field-type") get dataDrawFieldType(): string { return this.drawFieldType }
+  @HostBinding("attr.data-fields") get dataFields(): string { return JSON.stringify(this.fields) }
+  @HostBinding("attr.data-i18n") get dataI18n(): string { return JSON.stringify(this.i18n) }
+  @HostBinding("attr.data-custom-button-title") get dataCustomButtonTitle(): string { return this.customButton.title }
+  @HostBinding("attr.data-custom-button-url") get dataCustomButtonUrl(): string { return this.customButton.url }
+  @HostBinding("attr.data-with-recipients-button") get dataWithRecipientsButton(): boolean { return this.withRecipientsButton }
+  @HostBinding("attr.data-with-send-button") get dataWithSendButton(): boolean { return this.withSendButton }
+  @HostBinding("attr.data-with-documents-list") get dataWithDocumentsList(): boolean { return this.withDocumentsList }
+  @HostBinding("attr.data-with-fields-list") get dataWithFieldsList(): boolean { return this.withFieldsList }
+  @HostBinding("attr.data-with-title") get dataWithTitle(): boolean { return this.withTitle }
+  @HostBinding("attr.data-only-defined-fields") get dataOnlyDefinedFields(): boolean { return this.onlyDefinedFields }
+  @HostBinding("attr.data-with-upload-button") get dataWithUploadButton(): boolean { return this.withUploadButton }
+  @HostBinding("attr.data-with-sign-yourself-button") get dataWithSignYourselfButton(): boolean { return this.withSignYourselfButton }
+  @HostBinding("attr.data-background-color") get dataBackgroundColor(): string { return this.backgroundColor }
+  @HostBinding("attr.data-custom-css") get dataCustomCss(): string { return this.customCss }
 
   ngAfterViewInit(): void {
-    const builder = this.el.nativeElement;
-
-    Object.entries(this.attributes).forEach(([_, attribute]) => {
-      if (Array.isArray(attribute)) {
-        attribute.forEach((attr) => {
-          builder.setAttribute(attr.name, attr.value())
-        })
-      } else if (attribute) {
-        builder.setAttribute(attribute.name, attribute.value())
-      }
-    })
-
     this.loadScript()
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const builder = this.el.nativeElement;
-    const attributes = this.attributes
-
-    Object.entries(changes).forEach(([key, change]) => {
-      const attribute = attributes[key]
-
-      if (Array.isArray(attribute)) {
-        attribute.forEach((attr) => {
-          builder.setAttribute(attr.name, attr.value())
-        })
-      } else if (attribute) {
-        builder.setAttribute(attribute.name, change.currentValue)
-      }
-    })
-  }
-
   @HostListener('send', ['$event'])
   onSendEvent(event: CustomEvent): void {
     if (this.onSend) {
diff --git a/src/form.component.ts b/src/form.component.ts
index 83336aa..e324d87 100644
--- a/src/form.component.ts
+++ b/src/form.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ElementRef, HostListener, SimpleChanges } from "@angular/core"
+import { Component, Input, HostListener, HostBinding } from "@angular/core"
 
 interface DocusealField {
   name: string,
@@ -11,9 +11,7 @@ interface DocusealField {
 interface AfterViewInit {
   ngAfterViewInit(): void
 }
-interface OnChanges {
-  ngOnChanges(changes: SimpleChanges): void
-}
+
 @Component({
   selector: "docuseal-form",
   standalone: true,
@@ -21,7 +19,7 @@ interface OnChanges {
   styles: []
 })
 
-export class DocusealFormComponent implements AfterViewInit, OnChanges {
+export class DocusealFormComponent implements AfterViewInit {
   @Input() src: string = ""
   @Input() host: string = "cdn.docuseal.co"
   @Input() role: string = ""
@@ -44,7 +42,7 @@ export class DocusealFormComponent implements AfterViewInit, OnChanges {
   @Input() withSendCopyButton: boolean = true
   @Input() allowToResubmit: boolean = true
   @Input() allowTypedSignature: boolean = true
-  @Input() sendCopyEmail: boolean = false
+  @Input() sendCopyEmail: boolean | null = null
   @Input() values: object = {}
   @Input() metadata: object = {}
   @Input() i18n: object = {}
@@ -55,156 +53,38 @@ export class DocusealFormComponent implements AfterViewInit, OnChanges {
   @Input() onLoad: (detail: any) => void = () => {}
   @Input() customCss: string = ""
 
-  constructor(private el: ElementRef) {}
-
-  get attributes (): { [key: string]: any } {
-    return {
-      src: {
-        name: "data-src",
-        value: () => this.src
-      },
-      email: {
-        name: "data-email",
-        value: () => this.email
-      },
-      role: {
-        name: "data-role",
-        value: () => this.role || this.submitter
-      },
-      externalId: {
-        name: "data-external-id",
-        value: () => this.externalId || this.applicationKey
-      },
-      expand: {
-        name: "data-expand",
-        value: () => this.expand
-      },
-      preview: {
-        name: "data-preview",
-        value: () => this.preview
-      },
-      goToLast: {
-        name: "data-go-to-last",
-        value: () => this.goToLast
-      },
-      skipFields: {
-        name: "data-skip-fields",
-        value: () => this.skipFields
-      },
-      sendCopyEmail: {
-        name: "data-send-copy-email",
-        value: () => this.sendCopyEmail
-      },
-      withTitle: {
-        name: "data-with-title",
-        value: () => this.withTitle
-      },
-      logo: {
-        name: "data-logo",
-        value: () => this.logo
-      },
-      language: {
-        name: "data-language",
-        value: () => this.language
-      },
-      withFieldNames: {
-        name: "data-with-field-names",
-        value: () => this.withFieldNames
-      },
-      withDownloadButton: {
-        name: "data-with-download-button",
-        value: () => this.withDownloadButton
-      },
-      allowToResubmit: {
-        name: "data-allow-to-resubmit",
-        value: () => this.allowToResubmit
-      },
-      allowTypedSignature: {
-        name: "data-allow-typed-signature",
-        value: () => this.allowTypedSignature
-      },
-      completedRedirectUrl: {
-        name: "data-completed-redirect-url",
-        value: () => this.completedRedirectUrl
-      },
-      withSendCopyButton: {
-        name: "data-with-send-copy-button",
-        value: () => this.withSendCopyButton
-      },
-      values: {
-        name: "data-values",
-        value: () => JSON.stringify(this.values)
-      },
-      metadata: {
-        name: "data-metadata",
-        value: () => JSON.stringify(this.metadata)
-      },
-      fields: {
-        name: "data-fields",
-        value: () => JSON.stringify(this.fields)
-      },
-      i18n: {
-        name: "data-i18n",
-        value: () => JSON.stringify(this.i18n)
-      },
-      readonlyFields: {
-        name: "data-readonly-fields",
-        value: () => this.readonlyFields.join(',')
-      },
-      completedButton: [
-        {
-          name: "data-completed-button-title",
-          value: () => this.completedButton.title
-        },
-        {
-          name: "data-completed-button-url",
-          value: () => this.completedButton.url
-        }
-      ],
-      backgroundColor: {
-        name: "data-background-color",
-        value: () => this.backgroundColor
-      },
-      customCss: {
-        name: "data-custom-css",
-        value: () => this.customCss
-      }
-    }
-  }
+  @HostBinding("attr.data-src") get dataSrc(): string { return this.src }
+  @HostBinding("attr.data-email") get dataEmail(): string { return this.email }
+  @HostBinding("attr.data-role") get dataRole(): string { return this.role || this.submitter }
+  @HostBinding("attr.data-external-id") get dataExternalId(): string { return this.externalId || this.applicationKey }
+  @HostBinding("attr.data-expand") get dataExpand(): boolean { return this.expand }
+  @HostBinding("attr.data-preview") get dataPreview(): boolean { return this.preview }
+  @HostBinding("attr.data-go-to-last") get dataGoToLast(): boolean { return this.goToLast }
+  @HostBinding("attr.data-skip-fields") get dataSkipFields(): boolean { return this.skipFields }
+  @HostBinding("attr.data-send-copy-email") get dataSendCopyEmail(): boolean | null { return this.sendCopyEmail }
+  @HostBinding("attr.data-with-title") get dataWithTitle(): boolean { return this.withTitle }
+  @HostBinding("attr.data-logo") get dataLogo(): string { return this.logo }
+  @HostBinding("attr.data-language") get dataLanguage(): string { return this.language }
+  @HostBinding("attr.data-with-field-names") get dataWithFieldNames(): boolean { return this.withFieldNames }
+  @HostBinding("attr.data-with-download-button") get dataWithDownloadButton(): boolean { return this.withDownloadButton }
+  @HostBinding("attr.data-allow-to-resubmit") get dataAllowToResubmit(): boolean { return this.allowToResubmit }
+  @HostBinding("attr.data-allow-typed-signature") get dataAllowTypedSignature(): boolean { return this.allowTypedSignature }
+  @HostBinding("attr.data-completed-redirect-url") get dataCompletedRedirectUrl(): string { return this.completedRedirectUrl }
+  @HostBinding("attr.data-with-send-copy-button") get dataWithSendCopyButton(): boolean { return this.withSendCopyButton }
+  @HostBinding("attr.data-values") get dataValues(): string { return JSON.stringify(this.values) }
+  @HostBinding("attr.data-metadata") get dataMetadata(): string { return JSON.stringify(this.metadata) }
+  @HostBinding("attr.data-fields") get dataFields(): string { return JSON.stringify(this.fields) }
+  @HostBinding("attr.data-i18n") get dataI18n(): string { return JSON.stringify(this.i18n) }
+  @HostBinding("attr.data-readonly-fields") get dataReadonlyFields(): string { return this.readonlyFields.join(',') }
+  @HostBinding("attr.data-completed-button-title") get dataCompletedButtonTitle(): string { return this.completedButton.title }
+  @HostBinding("attr.data-completed-button-url") get dataCompletedButtonUrl(): string { return this.completedButton.url }
+  @HostBinding("attr.data-background-color") get dataBackgroundColor(): string { return this.backgroundColor }
+  @HostBinding("attr.data-custom-css") get dataCustomCss(): string { return this.customCss }
 
   ngAfterViewInit(): void {
-    const form = this.el.nativeElement;
-
-    Object.entries(this.attributes).forEach(([_, attribute]) => {
-      if (Array.isArray(attribute)) {
-        attribute.forEach((attr) => {
-          form.setAttribute(attr.name, attr.value())
-        })
-      } else {
-        form.setAttribute(attribute.name, attribute.value())
-      }
-    })
-
     this.loadScript()
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const form = this.el.nativeElement;
-    const attributes = this.attributes
-
-    Object.entries(changes).forEach(([key, change]) => {
-      const attribute = attributes[key]
-
-      if (Array.isArray(attribute)) {
-        attribute.forEach((attr) => {
-          form.setAttribute(attr.name, attr.value())
-        })
-      } else if (attribute) {
-        form.setAttribute(attribute.name, change.currentValue)
-      }
-    })
-  }
-
   @HostListener('completed', ['$event'])
   onCompleteEvent(event: CustomEvent): void {
     if (this.onComplete) {