Add UI param and Angular steps to modular-crm

Introduce a doc-params UI option (MVC/NG) across the modular-crm tutorial and update text to use conditional UI values. Add Angular-specific instructions: how to run the frontend, generate proxies, and an example Catalog component (TS + HTML) with notes on routing/menu configuration and TODO screenshots. Minor wording tweaks and summary updates for clarity.

docs/en/tutorials/modular-crm/index.md

@@ -7,6 +7,13 @@
 
 # Modular Monolith Application Development Tutorial
 
+```json
+//[doc-params]
+{
+  "UI": ["MVC", "NG"]
+}
+```
+
 ````json
 //[doc-nav]
 {
@@ -17,9 +24,9 @@
 }
 ````
 
-ABP provides a great infrastructure and tooling to build modular software solutions. In this tutorial, you will learn how to create application modules, compose and communicate them to build a monolith modular web application.
+ABP provides great infrastructure and tooling to build modular software solutions. In this tutorial, you will learn how to create application modules, compose and communicate them to build a modular monolith web application with the {{UI_Value}} UI.
 
-> **This tutorial focuses on modularity.** The example application's functionality and user interface are intentionally kept simple. If you want to learn real world, full featured application logic development with ABP, please follow the [Book Store tutorial](../book-store/index.md).
+> **This tutorial focuses on modularity.** The sample application's UI is intentionally kept simple so you can focus on module design and integration. For a real-world, full-featured application walkthrough with ABP, follow the [Book Store tutorial](../book-store/index.md).
 
 ## Tutorial Outline
 

docs/en/tutorials/modular-crm/part-01.md

@@ -7,6 +7,13 @@
 
 # Creating the Initial Solution
 
+```json
+//[doc-params]
+{
+  "UI": ["MVC", "NG"]
+}
+```
+
 ````json
 //[doc-nav]
 {
@@ -28,9 +35,12 @@ In this first part of this tutorial, we will create a new ABP solution with modu
 Follow the *[Get Started](../../get-started/single-layer-web-application.md)* guide to create a single layer web application with the following configuration:
 
 * **Solution name**: `ModularCrm`
-* **UI Framework**: ASP.NET Core MVC / Razor Pages
+* **UI Framework**: {{if UI == "MVC"}}ASP.NET Core MVC / Razor Pages{{else if UI == "NG"}}Angular{{end}}
 * **Database Provider**: Entity Framework Core
 
+{{if UI == "NG"}}> **Note:** Angular users can continue with the Angular UI steps in the upcoming parts while following the same modularity flow.
+{{end}}
+
 You can select the other options based on your preference but at the **Modularity** step, check the _Setup as a modular solution_ option and add a new **Standard Module** named `ModularCrm.Catalog`:
 
 ![](./images/modular-crm-wizard-modularity-step.png)

docs/en/tutorials/modular-crm/part-02.md

@@ -7,6 +7,13 @@
 
 # Setting Up the Catalog Module
 
+```json
+//[doc-params]
+{
+  "UI": ["MVC", "NG"]
+}
+```
+
 ````json
 //[doc-nav]
 {
@@ -57,10 +64,28 @@ Graph Build is a dotnet CLI command that recursively builds all the referenced d
 
 ## Running the Main Application
 
+{{if UI == "MVC"}}
+
 Open the *Solution Runner* panel, click the *Play* button (near to the solution root), right-click the `ModularCrm` application and select the *Browse* command. It will open the web application in the built-in browser. Then you can navigate to the *Catalog* page on the main menu of the application to see the Catalog page that is coming from the `ModularCrm.Catalog` module:
 
 ![abp-studio-solution-runner-initial-catalog-page](images/abp-studio-solution-runner-initial-catalog-page.png)
 
+{{else if UI == "NG"}}
+
+Open the *Solution Runner* panel and start the `ModularCrm` application to run the backend host.
+
+Then open a terminal in the `angular` folder and start the Angular application:
+
+```bash
+yarn start
+```
+
+After the Angular app starts, open the URL shown in the terminal (typically `http://localhost:4200`), sign in, and navigate to the *Catalog* page from the main menu to verify the `ModularCrm.Catalog` module UI is integrated.
+
+> TODO: Add Angular Catalog page screenshot.
+
+{{end}}
+
 ## Summary
 
-In this part, you installed the `ModularCrm.Catalog` module to the main application and run the solution to test if it has successfully installed. In the [next part](part-03.md), you will learn how to create entities, services and a basic user interface for the catalog module.
+In this part, you installed the `ModularCrm.Catalog` module to the main application and ran the solution to verify that it was installed successfully. In the [next part](part-03.md), you will learn how to create entities, services and a basic user interface for the catalog module.

docs/en/tutorials/modular-crm/part-03.md

@@ -7,6 +7,13 @@
 
 # Building the Catalog Module
 
+```json
+//[doc-params]
+{
+  "UI": ["MVC", "NG"]
+}
+```
+
 ````json
 //[doc-nav]
 {
@@ -404,6 +411,8 @@ In this section, you will create a very simple user interface to demonstrate how
 
 As a first step, you can stop the application on ABP Studio's Solution Runner if it is currently running.
 
+{{if UI == "MVC"}}
+
 ### Creating the Products Page
 
 Open the `ModularCrm.Catalog` .NET solution in your IDE, and find the `Pages/Catalog/Index.cshtml` file under the `ModularCrm.Catalog.UI` project:
@@ -471,6 +480,75 @@ Now, you can browse the *Catalog* page to see the list of the products:
 
 As you can see, developing a UI page in a modular ABP application is pretty straightforward. We kept the UI very simple to focus on modularity. To learn how to build complex application UIs, please check the [Book Store Tutorial](../book-store/index.md).
 
+{{else if UI == "NG"}}
+
+### Updating the Catalog Angular Page
+
+First, run the `ModularCrm` application so the backend APIs are available.
+
+Then open a terminal in the `modules/modularcrm.catalog/angular` folder and run the proxy generation command:
+
+```bash
+abp generate-proxy -t ng
+```
+
+This command generates or updates TypeScript client proxies for the `catalog` APIs under `projects/catalog/src/lib/proxy`. You will use the generated `ProductService` and related DTOs in the Catalog UI project.
+
+Now, open the `projects/catalog/src/lib/components/catalog.component.ts` file and replace its content with the following code:
+
+```ts
+import { Component, OnInit, inject } from '@angular/core';
+import { ProductDto, ProductService } from '../proxy/products';
+
+@Component({
+  selector: 'lib-catalog',
+  templateUrl: './catalog.component.html',
+})
+export class CatalogComponent implements OnInit {
+  products: ProductDto[] = [];
+
+  protected readonly productService = inject(ProductService);
+
+  ngOnInit(): void {
+    this.productService.getList().subscribe(response => {
+      this.products = response;
+    });
+  }
+}
+```
+
+Now, open the `projects/catalog/src/lib/components/catalog.component.html` file and replace its content with the following code:
+
+```html
+<h1>Products</h1>
+
+<abp-card>
+  <abp-card-body>
+    <abp-list-group>
+      @for (product of products; track product.id) {
+        <abp-list-group-item>
+          {%{{{ product.name }}}%} <span class="text-muted">(stock: {%{{{ product.stockCount }}}%})</span>
+        </abp-list-group-item>
+      }
+    </abp-list-group>
+  </abp-card-body>
+</abp-card>
+```
+
+In a module-based Angular UI, the route and menu are configured in the module's config project. Ensure `projects/catalog/config/src/providers/route.provider.ts` includes the `/catalog` route, and `projects/catalog/src/lib/catalog.routes.ts` lazy-loads `CatalogComponent`.
+
+> TODO: Add Angular Catalog component screenshot.
+
+Finally, start the Angular app from the root `angular` folder and navigate to the *Catalog* page to see the products list:
+
+```bash
+yarn start
+```
+
+> TODO: Add Angular Catalog page screenshot.
+
+{{end}}
+
 ## Summary
 
-In this part of the tutorial, you've built the functionality inside the _Catalog_ module, which was created in the [previous part](part-02.md). In the next part, you will create a new _Ordering_ module and install it into the main application.
+In this part of the tutorial, you've built the functionality inside the _Catalog_ module, which was created in the [previous part](part-02.md), and created a basic {{if UI == "MVC"}}MVC{{else if UI == "NG"}}Angular{{end}} UI to list products. In the next part, you will create a new _Ordering_ module and install it into the main application.