{{ '::Books' | abpLocalization }}
+ + +{{ '::WelcomeMessage' | abpLocalization: userName }}
+``` + +## Authorization + +### Permission Directive +```html + +``` + +### Permission Guard +```typescript +const routes: Routes = [ + { + path: '', + component: BookListComponent, + canActivate: [PermissionGuard], + data: { + requiredPolicy: 'BookStore.Books' + } + } +]; +``` + +### Programmatic Check +```typescript +constructor(private permissionService: PermissionService) {} + +canCreate(): boolean { + return this.permissionService.getGrantedPolicy('BookStore.Books.Create'); +} +``` + +## Forms with Validation +```typescript +@Component({...}) +export class BookFormComponent { + form: FormGroup; + + constructor(private fb: FormBuilder) { + this.buildForm(); + } + + buildForm(): void { + this.form = this.fb.group({ + name: ['', [Validators.required, Validators.maxLength(128)]], + price: [0, [Validators.required, Validators.min(0)]] + }); + } + + save(): void { + if (this.form.invalid) return; + + this.bookService.create(this.form.value).subscribe(() => { + // Handle success + }); + } +} +``` + +```html + +``` + +## Configuration API +```typescript +constructor(private configService: ConfigStateService) {} + +getCurrentUser(): CurrentUserDto { + return this.configService.getOne('currentUser'); +} + +getSettings(): void { + const setting = this.configService.getSetting('MyApp.MaxItemCount'); +} +``` + +## Modal Service +```typescript +constructor(private modalService: ModalService) {} + +openCreateModal(): void { + const modalRef = this.modalService.open(BookFormComponent, { + size: 'lg' + }); + + modalRef.result.then(result => { + if (result) { + this.list.get(); + } + }); +} +``` + +## Toast Notifications +```typescript +constructor(private toaster: ToasterService) {} + +showSuccess(): void { + this.toaster.success('::BookCreatedSuccessfully', '::Success'); +} + +showError(error: string): void { + this.toaster.error(error, '::Error'); +} +``` + +## Lazy Loading Modules +```typescript +// app-routing.module.ts +const routes: Routes = [ + { + path: 'books', + loadChildren: () => import('./book/book.module').then(m => m.BookModule) + } +]; +``` + +## Theme & Styling +- Use Bootstrap classes +- ABP provides theme variables via CSS custom properties +- Component-specific styles in `.component.scss` diff --git a/ai-rules/ui/blazor.mdc b/ai-rules/ui/blazor.mdc new file mode 100644 index 0000000000..68b8051109 --- /dev/null +++ b/ai-rules/ui/blazor.mdc @@ -0,0 +1,207 @@ +--- +description: "ABP Blazor UI patterns and components" +globs: "**/*.razor,**/Blazor/**/*.cs,**/*.Blazor*/**/*.cs" +alwaysApply: false +--- + +# ABP Blazor UI + +> **Docs**: https://abp.io/docs/latest/framework/ui/blazor/overall + +## Component Base Classes + +### Basic Component +```razor +@inherits AbpComponentBase + +@L["Books"]
+``` + +### CRUD Page +```razor +@page "/books" +@inherits AbpCrudPageBase@L["Books"]
+@L["PageTitle"]
+ +@* With parameters *@ +@L["WelcomeMessage", CurrentUser.UserName]
+``` + +## Authorization +```razor +@* Check permission before rendering *@ +@if (await AuthorizationService.IsGrantedAsync("MyPermission")) +{ + +} + +@* Using policy-based authorization *@ +You have access!
+@L["Books"]
+@L["Books"]
+ +@* With parameters *@ +@L["WelcomeMessage", Model.UserName]
+``` + +## JavaScript API +```javascript +// Localization +var text = abp.localization.getResource('BookStore')('Books'); + +// Authorization +if (abp.auth.isGranted('BookStore.Books.Create')) { + // Show create button +} + +// Settings +var maxCount = abp.setting.get('BookStore.MaxItemCount'); + +// Ajax with automatic error handling +abp.ajax({ + url: '/api/app/book', + type: 'POST', + data: JSON.stringify(bookData) +}).then(function(result) { + // Success +}); + +// Notifications +abp.notify.success('Book created successfully!'); +abp.notify.error('An error occurred!'); + +// Confirmation +abp.message.confirm('Are you sure?').then(function(confirmed) { + if (confirmed) { + // User confirmed + } +}); +``` + +## DataTables Integration +```javascript +var dataTable = $('#BooksTable').DataTable( + abp.libs.datatables.normalizeConfiguration({ + serverSide: true, + paging: true, + ajax: abp.libs.datatables.createAjax(bookService.getList), + columnDefs: [ + { + title: l('Name'), + data: 'name' + }, + { + title: l('Price'), + data: 'price', + render: function(data) { + return data.toFixed(2); + } + }, + { + title: l('Actions'), + rowAction: { + items: [ + { + text: l('Edit'), + visible: abp.auth.isGranted('BookStore.Books.Edit'), + action: function(data) { + editModal.open({ id: data.record.id }); + } + }, + { + text: l('Delete'), + visible: abp.auth.isGranted('BookStore.Books.Delete'), + confirmMessage: function(data) { + return l('BookDeletionConfirmationMessage', data.record.name); + }, + action: function(data) { + bookService.delete(data.record.id).then(function() { + abp.notify.success(l('SuccessfullyDeleted')); + dataTable.ajax.reload(); + }); + } + } + ] + } + } + ] + }) +); +``` + +## Modal Pages +**CreateModal.cshtml:** +```html +@page +@model CreateModalModel + +
+
+ @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) {
+