+
+ @if (field.type === 'text') {
+
+
+
+ }
+ `,
+ imports: [ReactiveFormsModule],
+})
+export class DynamicFormFieldComponent implements OnInit {
+ @Input() field!: FormFieldConfig;
+ @Input() form!: FormGroup;
+ @Input() isVisible: boolean = true;
+ @Output() fieldChange = new EventEmitter<{ fieldKey: string; value: any }>();
+
+ ngOnInit() {
+ const control = this.form.get(this.field.key);
+ if (control) {
+ control.valueChanges.subscribe(value => {
+ this.fieldChange.emit({ fieldKey: this.field.key, value });
+ });
+ }
+ }
+
+ isFieldInvalid(): boolean {
+ const control = this.form.get(this.field.key);
+ return !!(control && control.invalid && (control.dirty || control.touched));
+ }
+
+ getErrorMessage(): string {
+ const control = this.form.get(this.field.key);
+ if (!control || !control.errors) return '';
+
+ const validators = this.field.validators || [];
+
+ for (const validator of validators) {
+ if (control.errors[validator.type]) {
+ return validator.message;
+ }
+ }
+
+ // Fallback error messages
+ if (control.errors['required']) return `${this.field.label} is required`;
+ if (control.errors['email']) return 'Please enter a valid email address';
+ if (control.errors['minlength']) return `Minimum length is ${control.errors['minlength'].requiredLength}`;
+ if (control.errors['maxlength']) return `Maximum length is ${control.errors['maxlength'].requiredLength}`;
+
+ return 'Invalid input';
+ }
+}
+
+```
+
+### 5. Usage Example
+
+```typescript
+
+@Component({
+ selector: 'app-home',
+ template: `
+
+
+
+ @if (isFieldInvalid()) {
+
+ } @else if (field.type === 'select') {
+
+
+ {{ getErrorMessage() }}
+
+ }
+
+
+
+ @if (isFieldInvalid()) {
+
+ } @else if (field.type === 'checkbox') {
+
+
+ {{ getErrorMessage() }}
+
+ }
+
+
+
+ @if (isFieldInvalid()) {
+
+ } @else if (field.type === 'email') {
+
+
+ {{ getErrorMessage() }}
+
+ }
+
+
+
+ @if (isFieldInvalid()) {
+
+ } @else if (field.type === 'textarea') {
+
+
+ {{ getErrorMessage() }}
+
+ }
+
+
+
+ @if (isFieldInvalid()) {
+
+ }
+
+ {{ getErrorMessage() }}
+
+ }
+
+
+ `,
+ imports: [DynamicFormComponent]
+})
+export class HomeComponent {
+ @Input() title: string = 'Home Component';
+ formFields: FormFieldConfig[] = [
+ {
+ key: 'firstName',
+ type: 'text',
+ label: 'First Name',
+ placeholder: 'Enter first name',
+ required: true,
+ validators: [
+ { type: 'required', message: 'First name is required' },
+ { type: 'minLength', value: 2, message: 'Minimum 2 characters required' }
+ ],
+ gridSize: 12,
+ order: 1
+ },
+ {
+ key: 'lastName',
+ type: 'text',
+ label: 'Last Name',
+ placeholder: 'Enter last name',
+ required: true,
+ validators: [
+ { type: 'required', message: 'Last name is required' }
+ ],
+ gridSize: 12,
+ order: 2
+ },
+ {
+ key: 'email',
+ type: 'email',
+ label: 'Email Address',
+ placeholder: 'Enter email',
+ required: true,
+ validators: [
+ { type: 'required', message: 'Email is required' },
+ { type: 'email', message: 'Please enter a valid email' }
+ ],
+ order: 3
+ },
+ {
+ key: 'userType',
+ type: 'select',
+ label: 'User Type',
+ required: true,
+ options: [
+ { key: 'admin', value: 'Administrator' },
+ { key: 'user', value: 'Regular User' },
+ { key: 'guest', value: 'Guest User' }
+ ],
+ validators: [
+ { type: 'required', message: 'Please select user type' }
+ ],
+ order: 4
+ },
+ {
+ key: 'adminNotes',
+ type: 'textarea',
+ label: 'Admin Notes',
+ placeholder: 'Enter admin-specific notes',
+ conditionalLogic: [
+ {
+ dependsOn: 'userType',
+ condition: 'equals',
+ value: 'admin',
+ action: 'show'
+ }
+ ],
+ order: 5
+ }
+ ];
+
+ onSubmit(formData: any) {
+ console.log('Form submitted:', formData);
+ // Handle form submission
+ }
+
+ onCancel() {
+ console.log('Form cancelled');
+ // Handle form cancellation
+ }
+}
+
+
+```
+
+## Result
+
+
+
+## Conclusion
+
+These kinds of components are essential for large applications because they allow for rapid development and easy maintenance. By defining forms through configuration, developers can quickly adapt to changing requirements without extensive code changes. This approach also promotes consistency across the application, as the same form components can be reused in different contexts.
\ No newline at end of file
diff --git a/docs/en/Community-Articles/2025-10-07-Building-Scalable-Angular-Apps-with-Reusable-UI-Components/post.md b/docs/en/Community-Articles/2025-10-07-Building-Scalable-Angular-Apps-with-Reusable-UI-Components/post.md
new file mode 100644
index 0000000000..870703d12b
--- /dev/null
+++ b/docs/en/Community-Articles/2025-10-07-Building-Scalable-Angular-Apps-with-Reusable-UI-Components/post.md
@@ -0,0 +1,660 @@
+# Building Scalable Angular Apps with Reusable UI Components
+
+Frontend development keeps evolving at an incredible pace, and with every new update, our implementation standards improve as well. But even as tools and frameworks change, the core principles stay the same, and one of the most important is reusability.
+
+Reusability means building components and utilities that can be used in multiple places instead of using the same logic repeatedly. This approach not only saves time but also keeps your code clean, consistent, and easier to maintain as your project grows.
+
+Angular fully embraces this idea by offering modern features like **standalone components**, **signals**, **hybrid rendering**, and **component-level lazy loading**.
+
+In this article, we will explore how these features make it easier to build reusable UI components. We will also look at how to style them and organize them into shared libraries for scalable, long-term development.
+
+---
+
+## 🧩 Breaking Down Components for True Reusability
+
+The first approach to make an Angular component reusable is to use standalone components. As this feature has been supported for a long time, it is now the default behavior for the latest Angular versions. Keeping that in mind, we can ensure reusability by separating a big component into smaller ones to make the small pieces usable across the application.
+
+Here is a quick example:
+
+Imagine you start with a single `UserProfileComponent` that does everything including displaying user info, recent posts, a list of friends, and even handling profile editing.
+
+```ts
+// 📖 Compact user profile component
+import { Component } from "@angular/core";
+
+@Component({
+ selector: "app-user-profile",
+ template: `
+
+
+
+
+
+ ![User avatar]()
+
+
+ {{ user.name }}
+ +
+
+
+ Recent Posts
+-
+ @for (post of user.posts; track post) {
+
- {{ post }} + } +
+
+ Friends
+-
+ @for (friend of user.friends; track friend) {
+
- {{ friend }} + } +
+ ![User avatar]()
+
+ `,
+})
+export class UserAvatarComponent {
+ name = input.required{{ name() }}
+
+
+ `,
+})
+export class UserPostsComponent {
+ posts = inputRecent Posts
+-
+ @for (post of posts(); track post) {
+
- {{ post }} + } +
+
+ `,
+})
+export class UserFriendsComponent {
+ friends = inputFriends
+-
+ @for (friend of friends(); track friend) {
+
- {{ friend }} + } +
+
+ `,
+})
+export class UserCardComponent {
+ user = input.required<{ name: string; role: string }>();
+ select = output<{ name: string; role: string }>();
+}
+```
+
+---
+
+## 🔁 Reusing Components Across the Application
+
+As there are many ways of reusing a component in the project, we will go over a real-life example.
+
+Here are two very common ABP components that can be reused anywhere in the app:
+
+```ts
+//...
+import { ABP } from "@abp/ng.core";
+
+@Component({
+ selector: "abp-button",
+ template: `
+
+ `,
+ imports: [NgClass],
+})
+export class ButtonComponent implements OnInit {
+ private renderer = inject(Renderer2);
+
+ @Input()
+ buttonId = "";
+
+ @Input()
+ buttonClass = "btn btn-primary";
+
+ @Input()
+ buttonType = "button";
+
+ @Input()
+ formName?: string = undefined;
+
+ @Input()
+ iconClass?: string;
+
+ @Input()
+ loading = false;
+
+ @Input()
+ disabled: boolean | undefined = false;
+
+ @Input()
+ attributes?: ABP.Dictionary{{ user().name }}
+{{ user().role }}
+Books
+-
+ @for (book of books; track book.id) {
+
- {{ book.name }} — {{ book.price | currency }} + } +
Current email: {{ loginForm.email().value() }}
+``` + +Each field exposes: + +- `value()` +- `valid()` +- `errors()` +- `dirty()` +- `touched()` + +All as signals. + +--- + +### 4. Updating Form Models Programmatically + +Signal Forms allow three update methods. + +#### 1. Replace the entire model + +```ts +this.userModel.set({ + name: 'Alice', + email: 'alice@example.com', +}); +``` + +#### 2. Patch specific fields + +```ts +this.userModel.update(prev => ({ + ...prev, + email: newEmail, +})); +``` + +#### 3. Update a single field + +```ts +this.userForm.email().value.set(''); +``` + +This eliminates the need for: + +- `patchValue()` +- `setValue()` +- `formGroup.get('field')` + +--- + +### 5. Automatic Two-Way Binding With `[field]` + +The `[field]` directive enables perfect two-way data binding: + +```html + +``` + +#### How it works: + +- **User input → Field state → Model** +- **Model updates → Field state → Input UI** + +No subscriptions. +No event handlers. +No boilerplate. + +Reactive Forms could never achieve this cleanly. + +--- + +### 6. Nested Models and Arrays + +Models can contain nested object structures: + +```ts +userModel = signal({ + name: '', + address: { + street: '', + city: '', + }, +}); +``` + +Access fields easily: + +```html + +``` + +Arrays are also supported: + +```ts +orderModel = signal({ + items: [ + { product: '', quantity: 1, price: 0 } + ] +}); +``` + +Field state persists even when array items move, thanks to identity tracking. + +--- + +### 7. Schema-Based Validation + +Validation is clean and centralized: + +```ts +import { required, email } from '@angular/forms/signals'; + +const model = signal({ email: '' }); + +const formRef = form(model, { + email: [required(), email()], +}); +``` + +Field validation state is reactive: + +```ts +formRef.email().valid() +formRef.email().errors() +formRef.email().touched() +``` + +Validation no longer scatters across components. + +--- + +### 8. When Should You Use Signal Forms? + +#### New Angular 21+ apps +Signal-first architecture is the new standard. + +#### Teams wanting stronger type safety +Every field is exactly typed. + +#### Devs tired of Reactive Form boilerplate +Signal Forms drastically simplify code. + +#### Complex UI with computed reactive form state +Signals integrate perfectly. + +#### ❌ Avoid if: +- You need long-term stability +- You rely on mature Reactive Forms features +- Your app must avoid experimental APIs + +--- + +### 9. Reactive Forms vs Signal Forms + +| Feature | Reactive Forms | Signal Forms | +|--------|----------------|--------------| +| Boilerplate | High | Very low | +| Type-safety | Weak | Strong | +| Two-way binding | Manual | Automatic | +| Validation | Scattered | Centralized schema | +| Nested forms | Verbose | Natural | +| Subscriptions | Required | None | +| Change detection | Zone-heavy | Fine-grained | + +Signal Forms feel like the "modern Angular mode," while Reactive Forms increasingly feel legacy. + +--- + +### 10. Full Example: Login Form + +```ts +@Component({ + selector: 'app-login', + imports: [Field], + template: ` + + `, +}) +export class LoginComponent { + model = signal({ email: '', password: '' }); + form = form(this.model); + + submit() { + console.log(this.model()); + } +} +``` + +Minimal. Reactive. Completely type-safe. + +--- + +## **Conclusion** + +Signal Forms in Angular 21 represent a big step forward: + +- Cleaner API +- Stronger type safety +- Automatic two-way binding +- Centralized validation +- Fine-grained reactivity +- Dramatically better developer experience + + +Although these are experimental, they clearly show the future of Angular's form ecosystem. +Once you get into using Signal Forms, you may never want to use Reactive Forms again. + +--- diff --git a/docs/en/Community-Articles/2025-11-19-ABP-BLACK-FRIDAY-BLOG/post.md b/docs/en/Community-Articles/2025-11-19-ABP-BLACK-FRIDAY-BLOG/post.md new file mode 100644 index 0000000000..153470666f --- /dev/null +++ b/docs/en/Community-Articles/2025-11-19-ABP-BLACK-FRIDAY-BLOG/post.md @@ -0,0 +1,25 @@ +**ABP Black Friday Deals are Almost Here\!** + +The season of huge savings is back\! We are happy to announce **ABP Black Friday Campaign**, packed with exclusive deals that you simply won't want to miss. Whether you are ready to start building with ABP or looking to expand your existing license, this is your chance to maximize your savings\! + +**Campaign Dates: Mark Your Calendar** + +Black Friday campaign is live for one week only\! Our deals run from: **November 24th \- December 1st.** + +Don't miss this limited-time opportunity to **save up to $3,000** and take your software development to the next level. + +**What's Included in the ABP Black Friday Campaign?** + +Here’s why this campaign is the best time to buy or upgrade: + +* Open to Everyone: This campaign is available for both new and existing customers. +* Stack Your Savings: You can combine this Black Friday offer with our multi-year discounts for the greatest possible value. +* Flexible Upgrades: Planning to upgrade to a higher package? Now is the perfect time to make that move at a lower cost. +* More Developer Seats? No Problem\! Additional developer seats are also eligible under this campaign, allowing you to grow your team effortlessly and affordably. + +**Save Money Now\!** + +This campaign is your best opportunity all year to unlock advanced features, scale your team, or upgrade your plan while **saving up to $3,000.** Secure your savings before the campaign ends on December 1st\! + +[**Visit Pricing Page to Explore Offers\!**](https://abp.io/pricing) + diff --git a/docs/en/Community-Articles/2025-11-20-Whats-New-In-NET10-Libraries-Runtime/Post.md b/docs/en/Community-Articles/2025-11-20-Whats-New-In-NET10-Libraries-Runtime/Post.md new file mode 100644 index 0000000000..4346346e7e --- /dev/null +++ b/docs/en/Community-Articles/2025-11-20-Whats-New-In-NET10-Libraries-Runtime/Post.md @@ -0,0 +1,149 @@ +# What’s New in .NET 10 Libraries and Runtime? + +With .NET 10, Microsoft continues to evolve the platform toward higher performance, stronger security, and modern developer ergonomics. This release brings substantial updates across both the **.NET Libraries** and the **.NET Runtime**, making everyday development faster, safer, and more efficient. + + + +------ + +## .NET Libraries Improvements + +### 1. Post-Quantum Cryptography + +.NET 10 introduces support for new **quantum-resistant algorithms**, ML-KEM, ML-DSA, and SLH-DSA, through the `System.Security.Cryptography` namespace. + These are available when running on compatible OS versions (OpenSSL 3.5+ or Windows CNG). + +**Why it matters:** This future-proofs .NET apps against next-generation security threats, keeping them aligned with emerging FIPS standards and PQC readiness. + + + +------ + +### 2. Numeric Ordering for String Comparison + +The `StringComparer` and `HashSet` classes now support **numeric-aware string comparison** via `CompareOptions.NumericOrdering`. + This allows natural sorting of strings like `v2`, `v10`, `v100`. + +**Why it matters:** Cleaner and more intuitive sorting for version names, product codes, and other mixed string-number data. + + + +------ + +### 3. String Normalization for Spans + +Normalization APIs now support `Span