From a8ec6b78379b7379b85d957a897ecdaaa482440f Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Tue, 4 Nov 2025 15:17:55 +0300 Subject: [PATCH 1/3] docs update --- docs/en/tutorials/todo/single-layer/index.md | 103 ++++++++++--------- 1 file changed, 53 insertions(+), 50 deletions(-) diff --git a/docs/en/tutorials/todo/single-layer/index.md b/docs/en/tutorials/todo/single-layer/index.md index 16206b9bd7..0455ccd12f 100644 --- a/docs/en/tutorials/todo/single-layer/index.md +++ b/docs/en/tutorials/todo/single-layer/index.md @@ -724,43 +724,43 @@ Then, we can use the `TodoService` to use the server-side HTTP APIs, as we'll do Open the `/angular/src/app/home/home.component.ts` file and replace its content with the following code block: ```ts -import { ToasterService } from "@abp/ng.theme.shared"; -import { Component, OnInit, inject } from '@angular/core'; -import { TodoItemDto } from "@proxy/services/dtos"; -import { TodoService } from "@proxy/services"; +import {Component, inject, OnInit} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import { ToasterService } from '@abp/ng.theme.shared'; +import { TodoItemDto, TodoService } from '@proxy'; @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'], + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'], + imports: [FormsModule] }) export class HomeComponent implements OnInit { - todoItems: TodoItemDto[]; - newTodoText: string; + todoItems: TodoItemDto[]; + newTodoText: string; + readonly todoService = inject(TodoService); + readonly toasterService = inject(ToasterService); - private readonly todoService = inject(TodoService); - private readonly toasterService = inject(ToasterService); + ngOnInit(): void { + this.todoService.getList().subscribe(response => { + this.todoItems = response; + }); + } - ngOnInit(): void { - this.todoService.getList().subscribe(response => { - this.todoItems = response; - }); - } - - create(): void { - this.todoService.create(this.newTodoText).subscribe((result) => { - this.todoItems = this.todoItems.concat(result); - this.newTodoText = null; - }); - } + create(): void{ + this.todoService.create(this.newTodoText).subscribe((result) => { + this.todoItems = this.todoItems.concat(result); + this.newTodoText = null; + }); + } - delete(id: string): void { - this.todoService.delete(id).subscribe(() => { - this.todoItems = this.todoItems.filter(item => item.id !== id); - this.toasterService.info('Deleted the todo item.'); - }); - } + delete(id: string): void { + this.todoService.delete(id).subscribe(() => { + this.todoItems = this.todoItems.filter(item => item.id !== id); + this.toasterService.info('Deleted the todo item.'); + }); + } } ``` @@ -772,30 +772,33 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten ````html
-
-
-
TODO LIST
-
-
- -
-
-
- -
+
+
+
TODO LIST
-
- +
+ + +
+
+ +
+
+
+ +
+ + + +
    + @for (todoItem of todoItems; track todoItem.id) { +
  • + {{ todoItem.text }} +
    • + } +
- - -
    -
  • - {%{{{ todoItem.text }}}%} -
    • -
-
```` From 5f672b29d455cc57ee84a3b37146c8e271a9a6d3 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Tue, 4 Nov 2025 15:23:04 +0300 Subject: [PATCH 2/3] docs update --- docs/en/tutorials/todo/layered/index.md | 103 +++++++++++++----------- 1 file changed, 54 insertions(+), 49 deletions(-) diff --git a/docs/en/tutorials/todo/layered/index.md b/docs/en/tutorials/todo/layered/index.md index 08c463e81c..3b4004b10f 100644 --- a/docs/en/tutorials/todo/layered/index.md +++ b/docs/en/tutorials/todo/layered/index.md @@ -756,45 +756,46 @@ We can then use `todoService` to use the server-side HTTP APIs, as we'll do in t Open the `/angular/src/app/home/home.component.ts` file and replace its content with the following code block: -```js +```ts +import {Component, inject, OnInit} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import { ToasterService } from '@abp/ng.theme.shared'; -import { Component, OnInit, inject } from '@angular/core'; import { TodoItemDto, TodoService } from '@proxy'; @Component({ - selector: 'app-home', - standalone: false, - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'] + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'], + imports: [FormsModule] }) export class HomeComponent implements OnInit { - todoItems: TodoItemDto[]; - newTodoText: string; + todoItems: TodoItemDto[]; + newTodoText: string; + readonly todoService = inject(TodoService); + readonly toasterService = inject(ToasterService); - private readonly todoService = inject(TodoService); - private readonly toasterService = inject(ToasterService); + ngOnInit(): void { + this.todoService.getList().subscribe(response => { + this.todoItems = response; + }); + } - ngOnInit(): void { - this.todoService.getList().subscribe(response => { - this.todoItems = response; - }); - } - - create(): void { - this.todoService.create(this.newTodoText).subscribe((result) => { - this.todoItems = this.todoItems.concat(result); - this.newTodoText = null; - }); - } + create(): void{ + this.todoService.create(this.newTodoText).subscribe((result) => { + this.todoItems = this.todoItems.concat(result); + this.newTodoText = null; + }); + } - delete(id: string): void { - this.todoService.delete(id).subscribe(() => { - this.todoItems = this.todoItems.filter(item => item.id !== id); - this.toasterService.info('Deleted the todo item.'); - }); - } + delete(id: string): void { + this.todoService.delete(id).subscribe(() => { + this.todoItems = this.todoItems.filter(item => item.id !== id); + this.toasterService.info('Deleted the todo item.'); + }); + } } + ``` We've used `todoService` to get the list of todo items and assigned the returning value to the `todoItems` array. We've also added `create` and `delete` methods. These methods will be used on the view side. @@ -805,31 +806,35 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten ```html
-
-
-
TODO LIST
-
-
- -
-
-
- -
+
+
+
TODO LIST
-
- +
+ + +
+
+ +
+
+
+ +
+ + + +
    + @for (todoItem of todoItems; track todoItem.id) { +
  • + {{ todoItem.text }} +
    • + } +
- - -
    -
  • - {%{{{ todoItem.text }}}%} -
    • -
-
+ ``` ### home.component.scss From ea01f1955263c44c9b7e76cc571532e4271a2b09 Mon Sep 17 00:00:00 2001 From: erdemcaygor Date: Tue, 4 Nov 2025 18:15:31 +0300 Subject: [PATCH 3/3] docs update --- docs/en/tutorials/todo/layered/index.md | 2 +- docs/en/tutorials/todo/single-layer/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/tutorials/todo/layered/index.md b/docs/en/tutorials/todo/layered/index.md index 3b4004b10f..1cc2f9030c 100644 --- a/docs/en/tutorials/todo/layered/index.md +++ b/docs/en/tutorials/todo/layered/index.md @@ -827,7 +827,7 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten
    @for (todoItem of todoItems; track todoItem.id) {
  • - {{ todoItem.text }} + {%{{{ todoItem.text }}}%}
    • }
diff --git a/docs/en/tutorials/todo/single-layer/index.md b/docs/en/tutorials/todo/single-layer/index.md index 0455ccd12f..b236196663 100644 --- a/docs/en/tutorials/todo/single-layer/index.md +++ b/docs/en/tutorials/todo/single-layer/index.md @@ -793,7 +793,7 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten
    @for (todoItem of todoItems; track todoItem.id) {
  • - {{ todoItem.text }} + {%{{{ todoItem.text }}}%}
    • }