You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documents/src/pages/build-app/framework-integration/angular.md
+30-8Lines changed: 30 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,13 +12,34 @@ layout: default
12
12
# Angular Guide
13
13
14
14
## Try online demo
15
-
A playground project that uses Element Framework with Angular. Here is a [link](https://codesandbox.io/p/devbox/angular-16-forms-ef-v7-gghflk).
15
+
A playground project that uses Element Framework with Angular. Here is a [link](https://codesandbox.io/p/devbox/angular-19-forms-ef-v7-k99zdv).
16
16
17
17
## Using web components in Angular
18
+
@>This guideline uses project generated from [Angular CLI](https://github.com/angular/angular-cli) version 19.0.05.
18
19
19
-
@>This guideline uses project generated from [Angular CLI](https://github.com/angular/angular-cli) version 16.2.10.
20
+
### Standlone
21
+
Since Angular 17, the default project setup is a Standalone based component. To use Web component, have to import `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` and inject it into the `schemas` property of `@Component` decorator. This property will allow non-Angular elements named with dash case like web components to be used in Angular's template. The approach need to inject in every components that use web component.
20
22
21
-
Import `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` and inject it into the `schemas` property of our AppModule definition. This property will allow non-Angular elements named with dash case like web components to be used in Angular's template.
23
+
Make the following changes to `./src/app/app.component.ts`.
24
+
25
+
```diff
26
+
-import { Component } from '@angular/core';
27
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
28
+
import { Component } from '@angular/core';
29
+
30
+
@Component({
31
+
selector: 'app-root',
32
+
templateUrl: './app.component.html',
33
+
styleUrl: './app.component.css',
34
+
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
35
+
})
36
+
export class AppComponent {
37
+
...
38
+
}
39
+
```
40
+
41
+
### Module base
42
+
In other way if you are a module-based application, you can enable to use web component by importing `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` and inject it into the `schemas` property of our AppModule definition.
22
43
23
44
Make the following changes to `./src/app/app.module.ts`.
24
45
@@ -27,18 +48,19 @@ Make the following changes to `./src/app/app.module.ts`.
27
48
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
28
49
import { BrowserModule } from '@angular/platform-browser';
29
50
51
+
import { AppRoutingModule } from './app-routing.module';
30
52
import { AppComponent } from './app.component';
31
53
32
54
@NgModule({
33
55
declarations: [
34
56
AppComponent
35
57
],
36
58
imports: [
37
-
BrowserModule
59
+
BrowserModule,
60
+
AppRoutingModule
38
61
],
39
62
providers: [],
40
-
- bootstrap: [AppComponent]
41
-
+ bootstrap: [AppComponent],
63
+
bootstrap: [AppComponent],
42
64
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
43
65
})
44
66
@@ -47,9 +69,9 @@ Make the following changes to `./src/app/app.module.ts`.
47
69
48
70
## Using EF with Angular's form
49
71
50
-
To utilise full capabilities of Angular's powerful [ReactiveForms](https://angular.io/guide/reactive-forms) with web components, we need to use [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor) directive which acts as a bridge that synchronizes the data between element and Forms API.
72
+
To utilise full capabilities of Angular's powerful [ReactiveForms](https://angular.dev/guide/forms/reactive-forms) with web components, we need to use [ControlValueAccessor](https://angular.dev/api/forms/ControlValueAccessor) directive which acts as a bridge that synchronizes the data between element and Forms API.
51
73
52
-
In most cases, for elements such as `ef-text-field`, `ef-search-field` and `ef-number-field>` that has similar behavior to native `input[type=text]`, you can use [DefaultValueAccessor](https://angular.io/api/forms/DefaultValueAccessor) directive `ngDefaultControl`.
74
+
In most cases, for elements such as `ef-text-field`, `ef-search-field` and `ef-number-field>` that has similar behavior to native `input[type=text]`, you can use [DefaultValueAccessor](https://angular.dev/api/forms/DefaultValueAccessor) directive `ngDefaultControl`.
0 commit comments