From 2f37df3545ee9758dd5374658302777c9587039e Mon Sep 17 00:00:00 2001
From: sample <chitturi.akhila@accolitedigital.com>
Date: Tue, 11 Jul 2023 20:02:13 +0530
Subject: [PATCH] Changes are made for typescript issue in angular

---
 README.md                              | 43 ++++++++++++++++++++++++++
 projects/demo/src/app/app.component.ts |  6 ++--
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4396082..ca65b0d 100644
--- a/README.md
+++ b/README.md
@@ -619,6 +619,49 @@ export class AppComponent implements OnInit{
 }
 ```
 
+### Using type definition
+
+If you want to use the type definitions the following code changes needs to be done in app.component.ts file.
+```typescript
+import { DefineIcon,RegisterCommand } from 'froala-editor';
+
+// We will make usage of the Init hook and make the implementation there.
+import { Component, OnInit  } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  template: `<div class="sample">
+               <h2>Sample 11: Add Custom Button</h2>
+               <div [froalaEditor]="options" [(froalaModel)]="content" ></div>
+             </div>`,
+
+
+export class AppComponent implements OnInit{
+
+  ngOnInit () {
+    DefineIcon('alert', {NAME: 'info'});
+    RegisterCommand('alert', {
+      title: 'Hello',
+      focus: false,
+      undo: false,
+      refreshAfterCallback: false,
+
+      callback: () => {
+        alert('Hello!', this);
+      }
+    });
+  }
+
+  public options: Object = {
+    charCounterCount: true,
+    toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
+    toolbarButtonsXS: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
+    toolbarButtonsSM: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
+    toolbarButtonsMD: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
+  };
+}
+```
+
 
 ### Special tags
 Note: In order to use special tags in `app.module.ts` add
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
index 32a46bc..9bd3776 100644
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 
 import FroalaEditor from 'froala-editor';
-
+import { DefineIcon,RegisterCommand } from 'froala-editor';
 @Component({
   selector: 'app-demo',
   template: `
@@ -99,8 +99,8 @@ import FroalaEditor from 'froala-editor';
 export class AppComponent implements OnInit {
 
   ngOnInit () {
-    FroalaEditor.DefineIcon('alert', { SVG_KEY: 'help' });
-    FroalaEditor.RegisterCommand('alert', {
+    DefineIcon('alert', { SVG_KEY: 'help' });
+    RegisterCommand('alert', {
       title: 'Hello',
       focus: false,
       undo: false,