Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update content to angualr 19 #1250

Merged
merged 5 commits into from
Dec 23, 2024
Merged

docs: update content to angualr 19 #1250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
218f26e
docs: update content to angualr 19
Theeraphat-Sorasetsakul Dec 20, 2024
137c32a
docs: update compatibility page
Theeraphat-Sorasetsakul Dec 23, 2024
9cdf6eb
docs: remove unused content
Theeraphat-Sorasetsakul Dec 23, 2024
591f887
docs: fix wording
Theeraphat-Sorasetsakul Dec 23, 2024
b6495df
Merge branch 'v7' into docs/update-angular19
Theeraphat-Sorasetsakul Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions documents/src/pages/build-app/compatibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ Information below shows compatibility when using v7 with some popular frameworks
| | 17 | 2021 | Not specified | Not specified | ![](/resources/images/green-tick.png) |
| | 16 | 2018 | Not specified | Not specified | ![](/resources/images/green-tick.png) |
| | 15<sup>*</sup> | 2016 | `<=16` | Not specified | ![](/resources/images/amber-tick.png) |
| Angular | 16 | 2023 | `^16.14.0` or `^18.10.0` | `>= 4.9.3` < `5.2.0` | ![](/resources/images/green-tick.png) |
| Angular | 19 | 2024 | `^18.19.1` or `^20.11.1` or `^22.0.0` | `>= 5.5.0` < `5.7.0` | ![](/resources/images/green-tick.png) |
| | 18 | 2024 | `^18.19.1` or `^20.11.1` or `^22.0.0` | `>= 5.4.0` < `5.6.0` | ![](/resources/images/green-tick.png) |
| | 17 | 2023 | `^18.13.0` or `^20.9.0` | `>= 5.2.0` < `5.5.0` | ![](/resources/images/green-tick.png) |
| | 16 | 2023 | `^16.14.0` or `^18.10.0` | `>= 4.9.3` < `5.2.0` | ![](/resources/images/green-tick.png) |
| | 15 | 2022 | `^14.20.0` or `^16.13.0` or `^18.10.0` | `>= 4.8.2` < `5.0.0` | ![](/resources/images/green-tick.png) |
| | 14 | 2022 | `^14.15.0` or `^16.10.0` | `>= 4.6.2` < `4.9.0` | ![](/resources/images/green-tick.png) |
| | 13 | 2022 | `^12.20.0` or `^14.15.0` or `^16.10.0` | `>= 4.4.3` < `4.7.0` | ![](/resources/images/green-tick.png) |
Expand All @@ -44,7 +47,7 @@ Information below shows compatibility when using v7 with some popular frameworks

## References

* [Angular versioning and releases](https://angular.io/guide/releases)
* [Angular versioning and releases](https://angular.dev/reference/versions)
* [EOL and support information for Angular](https://endoflife.date/angular)
* [EOL and support information for React](https://endoflife.date/react)

Expand Down
38 changes: 30 additions & 8 deletions documents/src/pages/build-app/framework-integration/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,34 @@ layout: default
# Angular Guide

## Try online demo
A playground project that uses Element Framework with Angular. Here is a [link](https://codesandbox.io/p/devbox/angular-16-forms-ef-v7-gghflk).
A playground project that uses Element Framework with Angular. Here is a [link](https://codesandbox.io/p/devbox/angular-19-forms-ef-v7-k99zdv).

## Using web components in Angular
@>This guideline uses project generated from [Angular CLI](https://github.com/angular/angular-cli) version 19.0.05.

@>This guideline uses project generated from [Angular CLI](https://github.com/angular/angular-cli) version 16.2.10.
### Standlone
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.

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.
Make the following changes to `./src/app/app.component.ts`.

```diff
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
...
}
```

### Module base
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.

Make the following changes to `./src/app/app.module.ts`.

Expand All @@ -27,18 +48,19 @@ Make the following changes to `./src/app/app.module.ts`.
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
BrowserModule,
AppRoutingModule
],
providers: [],
- bootstrap: [AppComponent]
+ bootstrap: [AppComponent],
bootstrap: [AppComponent],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Expand All @@ -47,9 +69,9 @@ Make the following changes to `./src/app/app.module.ts`.

## Using EF with Angular's form

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.
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.

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`.
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`.

```html
<ef-text-field formControlName="..." ngDefaultControl>
Expand Down
Loading