Skip to content

Commit 4026aa4

Browse files
update to internal commit 2e278598
1 parent 06c696e commit 4026aa4

File tree

1 file changed

+100
-3
lines changed

1 file changed

+100
-3
lines changed

getstarted/angular.md

Lines changed: 100 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ permalink: /indepth/development/angular.html
1616

1717
## Preparation
1818

19-
Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. `node 14.4.0` and `Angular CLI 9.1.12` are used in the example below.
19+
Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. `node 22.14.0` and `Angular CLI 19.1.7` are used in the example below.
2020

2121
## Create the sample project
2222

@@ -121,7 +121,7 @@ acquireImage() {
121121
IfCloseSourceAfterAcquire: true,
122122
});
123123
})
124-
.catch((exp) => {
124+
.catch((exp:any) => {
125125
console.error(exp.message);
126126
});
127127
}
@@ -136,7 +136,104 @@ Edit the file `app.component.html` to contain nothing but the following
136136
<app-dwt></app-dwt>
137137
```
138138

139-
* Try running the project.
139+
* Add the component to `app.component.ts` .
140+
141+
``` typescript
142+
import { DwtComponent } from "./dwt/dwt.component";
143+
```
144+
145+
``` typescript
146+
imports: [RouterOutlet, DwtComponent],
147+
```
148+
149+
### Review the Complete Code
150+
151+
* `dwt.component.html`
152+
153+
``` html
154+
<button (click)="acquireImage()">Acquire Images</button>
155+
<div id="dwtcontrolContainer"></div>
156+
```
157+
158+
* `dwt.component.ts`
159+
160+
``` typescript
161+
import { Component } from '@angular/core';
162+
import Dynamsoft from 'dwt';
163+
import { WebTwain } from 'dwt/dist/types/WebTwain';
164+
165+
@Component({
166+
selector: 'app-dwt',
167+
imports: [],
168+
templateUrl: './dwt.component.html',
169+
styleUrl: './dwt.component.css'
170+
})
171+
export class DwtComponent {
172+
containerId = "dwtcontrolContainer";
173+
ngOnInit(): void {
174+
Dynamsoft.DWT.Containers = [{
175+
WebTwainId: 'dwtObject',
176+
ContainerId: this.containerId,
177+
Width: '300px',
178+
Height: '400px'
179+
}];
180+
Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => {
181+
this.Dynamsoft_OnReady();
182+
});
183+
Dynamsoft.DWT.ProductKey = 'YOUR-PRODUCT-KEY';
184+
Dynamsoft.DWT.ResourcesPath = 'assets/dwt-resources';
185+
Dynamsoft.DWT.Load();
186+
}
187+
188+
DWTObject: WebTwain | any = null;
189+
Dynamsoft_OnReady() {
190+
this.DWTObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
191+
}
192+
acquireImage() {
193+
if (this.DWTObject) {
194+
this.DWTObject.SelectSourceAsync()
195+
.then(() => {
196+
return this.DWTObject.AcquireImageAsync({
197+
IfCloseSourceAfterAcquire: true,
198+
});
199+
})
200+
.catch((exp: any) => {
201+
console.error(exp.message);
202+
});
203+
}
204+
}
205+
}
206+
```
207+
> Note:
208+
> * `ProductKey` must be set to a valid trial or full key.
209+
210+
* `app.component.html`
211+
212+
``` html
213+
<style></style>
214+
<app-dwt></app-dwt>
215+
<router-outlet />
216+
```
217+
218+
* `app.component.ts`
219+
220+
``` typescript
221+
import { Component } from '@angular/core';
222+
import { RouterOutlet } from '@angular/router';
223+
import { DwtComponent } from "./dwt/dwt.component";
224+
225+
@Component({
226+
selector: 'app-root',
227+
imports: [RouterOutlet, DwtComponent],
228+
templateUrl: './app.component.html',
229+
styleUrl: './app.component.css'
230+
})
231+
export class AppComponent {
232+
title = 'dwt-angular';
233+
}
234+
```
235+
236+
## Try running the project.
140237

141238
``` cmd
142239
ng serve -o

0 commit comments

Comments
 (0)