diff --git a/packages/abc/auto-focus/demo/simple.md b/packages/abc/auto-focus/demo/simple.md
index df2fe47a29..deb7b1f30d 100644
--- a/packages/abc/auto-focus/demo/simple.md
+++ b/packages/abc/auto-focus/demo/simple.md
@@ -14,7 +14,7 @@ order: 0
 Simplest of usage.
 
 ```ts
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 
 import { AutoFocusDirective } from '@delon/abc/auto-focus';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -23,8 +23,8 @@ import { NzInputModule } from 'ng-zorro-antd/input';
 @Component({
   selector: 'app-demo',
   template: `
-    <button nz-button (click)="showInput = !showInput">Toggle Input</button>
-    @if (showInput) {
+    <button nz-button (click)="showInput.set(!showInput())">Toggle Input</button>
+    @if (showInput()) {
       <div class="mt-md">
         <input nz-input auto-focus />
       </div>
@@ -33,6 +33,6 @@ import { NzInputModule } from 'ng-zorro-antd/input';
   imports: [NzButtonModule, NzInputModule, AutoFocusDirective]
 })
 export class DemoComponent {
-  showInput = false;
+  showInput = signal(false);
 }
 ```
diff --git a/packages/abc/cell/demo/simple.md b/packages/abc/cell/demo/simple.md
index 7c4504206c..c4c9e25399 100644
--- a/packages/abc/cell/demo/simple.md
+++ b/packages/abc/cell/demo/simple.md
@@ -15,7 +15,7 @@ Simplest of usage.
 
 ```ts
 import { JsonPipe } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import { delay, finalize, of, take } from 'rxjs';
@@ -38,8 +38,8 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
       <div nz-col nzSpan="8"> currency => <cell value="100000" [options]="{ unit: '$' }" /> </div>
       <div nz-col nzSpan="8"> cny => <cell value="100000" [options]="{ type: 'cny' }" /> </div>
       <div nz-col nzSpan="8">
-        yn => <cell [value]="yn" [options]="{ type: 'boolean' }" />
-        <a (click)="yn = !yn">Change Value</a>
+        yn => <cell [value]="yn()" [options]="{ type: 'boolean' }" />
+        <a (click)="yn.set(!yn())">Change Value</a>
       </div>
       <div nz-col nzSpan="8">
         img =>
@@ -64,8 +64,8 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
       </div>
       <div nz-col nzSpan="8">
         link =>
-        <cell value="Link" [options]="{ link: { url: 'https://ng-alain.com' } }" [disabled]="disabled" />
-        <a (click)="disabled = !disabled" class="ml-sm">Change Disabled</a>
+        <cell value="Link" [options]="{ link: { url: 'https://ng-alain.com' } }" [disabled]="disabled()" />
+        <a (click)="disabled.set(!disabled())" class="ml-sm">Change Disabled</a>
       </div>
       <div nz-col nzSpan="8">
         html =>
@@ -73,7 +73,7 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
       </div>
       <div nz-col nzSpan="8">
         SafeHtml =>
-        <cell [value]="safeHtml" />
+        <cell [value]="safeHtml()" />
         <a (click)="updateSafeHtml()" class="ml-sm">updateSafeHtml</a>
       </div>
       <div nz-col nzSpan="8">
@@ -89,20 +89,21 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
         <cell
           [(value)]="checkbox"
           [options]="{ type: 'checkbox', tooltip: 'Tooltip', checkbox: { label: 'Label' } }"
-          [disabled]="disabled"
+          [disabled]="disabled()"
         />
-        {{ checkbox }}
-        <a (click)="disabled = !disabled" class="ml-sm">Change Disabled</a>
+        {{ checkbox() }}
+        <a (click)="disabled.set(!disabled())" class="ml-sm">Change Disabled</a>
       </div>
       <div nz-col nzSpan="8">
         radio =>
         <cell
           [(value)]="radio"
           [options]="{ type: 'radio', tooltip: 'Tooltip', radio: { label: 'Radio' } }"
-          [disabled]="disabled"
+          [disabled]="disabled()"
         />
-        <a (click)="radio = !radio">Change Value</a>
-        <a (click)="disabled = !disabled" class="ml-sm">Change Disabled</a>
+        {{ radio() }}
+        <a (click)="radio.set(!radio())">Change Value</a>
+        <a (click)="disabled.set(!disabled())" class="ml-sm">Change Disabled</a>
       </div>
       <div nz-col nzSpan="8">
         enum =>
@@ -130,13 +131,13 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
       </div>
       <div nz-col nzSpan="8">
         loading =>
-        <cell value="Done" [loading]="loading" />
-        <a (click)="loading = !loading" class="ml-md">Change</a>
+        <cell value="Done" [loading]="loading()" />
+        <a (click)="loading.set(!loading())" class="ml-md">Change</a>
       </div>
       <div nz-col nzSpan="8">
         Async =>
-        <cell [value]="async" [loading]="asyncLoading" />
-        @if (!asyncLoading) {
+        <cell [value]="async" [loading]="asyncLoading()" />
+        @if (!asyncLoading()) {
           <a (click)="again()" class="ml-md">Again</a>
         }
       </div>
@@ -144,7 +145,7 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
       <div nz-col nzSpan="8"> Text Unit => <cell [value]="{ text: '100', unit: '元' }" /> </div>
       <div nz-col nzSpan="8">
         custom widget =>
-        <cell [value]="imageValue" [options]="{ widget: { key: 'test', data: 'new url' } }" />
+        <cell [value]="imageValue()" [options]="{ widget: { key: 'test', data: 'new url' } }" />
         <a (click)="refreshImage()">Refresh Image</a>
       </div>
     </div>
@@ -161,29 +162,24 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
 })
 export class DemoComponent implements OnInit {
   private readonly ds = inject(DomSanitizer);
-  private readonly cdr = inject(ChangeDetectorRef);
-  value: unknown = 'string';
-  imageValue = 'https://randomuser.me/api/portraits/thumb/women/47.jpg';
-  checkbox = false;
-  radio = true;
-  disabled = false;
-  yn = true;
+  imageValue = signal('https://randomuser.me/api/portraits/thumb/women/47.jpg');
+  checkbox = signal(false);
+  radio = signal(true);
+  disabled = signal(false);
+  yn = signal(true);
+  loading = signal(true);
   default: string = '-';
-  defaultCondition: unknown = '*';
-  options?: CellOptions;
   baseList = ['string', true, false, 100, 1000000, new Date()];
   typeList: CellRenderType[] = ['primary', 'success', 'danger', 'warning'];
-  now = new Date();
   day3 = subDays(new Date(), 3);
   HTML = `<strong>Strong</string>`;
   status: CellBadge = {
     WAIT: { text: 'Wait', tooltip: 'Refers to waiting for the user to ship' },
     FINISHED: { text: 'Done', color: 'success' }
   };
-  loading = true;
-  asyncLoading = true;
+  asyncLoading = signal(true);
   async?: CellFuValue;
-  safeHtml = this.ds.bypassSecurityTrustHtml(`<strong>Strong Html</strong>`);
+  safeHtml = signal(this.ds.bypassSecurityTrustHtml(`<strong>Strong Html</strong>`));
   enum = { 1: 'Success', 2: 'Error' };
   enumValue = 1;
   bigImg: CellOptions = {
@@ -197,33 +193,22 @@ export class DemoComponent implements OnInit {
     this.again();
   }
 
-  refresh(): void {
-    this.value = new Date();
-    this.cdr.detectChanges();
-  }
-
   again(): void {
-    this.asyncLoading = true;
+    this.asyncLoading.set(true);
     this.async = (() =>
       of({ text: `${+new Date()}` }).pipe(
         take(1),
         delay(1000 * 1),
-        finalize(() => {
-          this.asyncLoading = false;
-          this.cdr.detectChanges();
-        })
+        finalize(() => this.asyncLoading.set(false))
       )) as CellFuValue;
-    this.cdr.detectChanges();
   }
 
   updateSafeHtml(): void {
-    this.safeHtml = this.ds.bypassSecurityTrustHtml(`alert('a');<script>alert('a')</script>`);
-    this.cdr.detectChanges();
+    this.safeHtml.set(this.ds.bypassSecurityTrustHtml(`alert('a');<script>alert('a')</script>`));
   }
 
   refreshImage(): void {
-    this.imageValue = `https://randomuser.me/api/portraits/thumb/women/${Math.floor(Math.random() * 50) + 10}.jpg`;
-    this.cdr.detectChanges();
+    this.imageValue.set(`https://randomuser.me/api/portraits/thumb/women/${Math.floor(Math.random() * 50) + 10}.jpg`);
   }
 }
 ```
diff --git a/packages/abc/notice-icon/demo/basic.md b/packages/abc/notice-icon/demo/basic.md
index 1f8bd1ca53..ae466b0985 100644
--- a/packages/abc/notice-icon/demo/basic.md
+++ b/packages/abc/notice-icon/demo/basic.md
@@ -12,7 +12,7 @@ import { NoticeIconComponent } from '@delon/abc/notice-icon';
 
 @Component({
   selector: 'app-demo',
-  template: ` <notice-icon count="5" /> `,
+  template: `<notice-icon count="5" />`,
   imports: [NoticeIconComponent]
 })
 export class DemoComponent {}
diff --git a/packages/abc/notice-icon/demo/popover.md b/packages/abc/notice-icon/demo/popover.md
index ee2a98bdfc..e6bccdd18a 100644
--- a/packages/abc/notice-icon/demo/popover.md
+++ b/packages/abc/notice-icon/demo/popover.md
@@ -6,7 +6,9 @@ title: 带浮层卡片
 点击展开通知卡片，展现多种类型的通知，通常放在导航工具栏。
 
 ```ts
-import { Component, TemplateRef, ViewChild, inject } from '@angular/core';
+import { Component, DestroyRef, TemplateRef, computed, inject, signal, viewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { finalize, timer } from 'rxjs';
 
 import { add, formatDistanceToNow, parse } from 'date-fns';
 
@@ -21,9 +23,9 @@ import { NzMessageService } from 'ng-zorro-antd/message';
       style="text-align: right; height: 64px; line-height: 64px; box-shadow: rgba(0, 21, 41, 0.12) 0 1px 4px; padding: 0 32px; width: 400px;"
     >
       <notice-icon
-        [data]="data"
-        [count]="count"
-        [loading]="loading"
+        [data]="data()"
+        [count]="count()"
+        [loading]="loading()"
         (select)="select($event)"
         (clear)="clear($event)"
         (popoverVisibleChange)="loadData()"
@@ -40,10 +42,13 @@ import { NzMessageService } from 'ng-zorro-antd/message';
 export class DemoComponent {
   private readonly msg = inject(NzMessageService);
   private readonly nzI18n = inject(NzI18nService);
+  private readonly d$ = inject(DestroyRef);
 
-  @ViewChild('titleTpl') private titleTpl!: TemplateRef<{ $implicit: NoticeIconList }>;
-  @ViewChild('descTpl') private descTpl!: TemplateRef<{ $implicit: NoticeIconList }>;
-  data: NoticeItem[] = [
+  titleTpl = viewChild<TemplateRef<{ $implicit: NoticeIconList }>>('descTpl');
+  descTpl = viewChild<TemplateRef<{ $implicit: NoticeIconList }>>('descTpl');
+  count = signal(5);
+  loading = signal(false);
+  types: NoticeItem[] = [
     {
       title: '通知',
       list: [],
@@ -66,14 +71,11 @@ export class DemoComponent {
       clearText: '清空待办'
     }
   ];
-  count = 5;
-  loading = false;
-
-  updateNoticeData(notices: NoticeIconList[]): NoticeItem[] {
-    const data = this.data.slice();
+  list = signal<NoticeIconList[]>([]);
+  data = computed(() => {
+    const data = this.types.slice();
     data.forEach(i => (i.list = []));
-
-    notices.forEach(item => {
+    this.list().forEach(item => {
       const newItem = { ...item };
       if (typeof newItem.datetime === 'string') {
         newItem.datetime = parse(newItem.datetime, 'yyyy-MM-dd', new Date());
@@ -88,125 +90,133 @@ export class DemoComponent {
             processing: 'blue',
             urgent: 'red',
             doing: 'gold'
-          } as { [key: string]: string | undefined }
+          } as Record<string, string | undefined>
         )[newItem.status];
       }
       data.find(w => w.title === newItem.type)!.list.push(newItem);
     });
     return data;
-  }
+  });
 
   loadData(): void {
-    if (this.loading) return;
-    this.loading = true;
-    setTimeout(() => {
-      const now = new Date();
-      console.log(this.descTpl);
-      this.data = this.updateNoticeData([
-        {
-          id: '000000001',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-          title: '你收到了 14 份新周报',
-          datetime: add(now, { days: 10 }),
-          type: '通知'
-        },
-        {
-          id: '000000002',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
-          title: '你推荐的 曲妮妮 已通过第三轮面试',
-          datetime: add(now, { days: -3 }),
-          type: '通知'
-        },
-        {
-          id: '000000003',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
-          title: '这种模板可以区分多种通知类型',
-          datetime: add(now, { months: -3 }),
-          read: true,
-          type: '通知'
-        },
-        {
-          id: '000000004',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
-          title: '左侧图标用于区分不同的类型',
-          datetime: add(now, { years: -1 }),
-          type: '通知'
-        },
-        {
-          id: '000000005',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-          title: '内容不要超过两行字，超出时自动截断',
-          datetime: '2017-08-07',
-          type: '通知'
-        },
-        {
-          id: '000000006',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-          title: '曲丽丽 评论了你',
-          description: '描述信息描述信息描述信息',
-          datetime: '2017-08-07',
-          type: '消息'
-        },
-        {
-          id: '000000007',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-          title: '朱偏右 回复了你',
-          description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-          datetime: '2017-08-07',
-          type: '消息'
-        },
-        {
-          id: '000000008',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-          title: this.titleTpl,
-          description: this.descTpl,
-          datetime: '2017-08-07',
-          type: '消息'
-        },
-        {
-          id: '000000009',
-          title: '任务名称',
-          description: '任务需要在 2017-01-12 20:00 前启动',
-          extra: '未开始',
-          status: 'todo',
-          type: '待办'
-        },
-        {
-          id: '000000010',
-          title: '第三方紧急代码变更',
-          description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-          extra: '马上到期',
-          status: 'urgent',
-          type: '待办'
-        },
-        {
-          id: '000000011',
-          title: '信息安全考试',
-          description: '指派竹尔于 2017-01-09 前完成更新并发布',
-          extra: '已耗时 8 天',
-          status: 'doing',
-          type: '待办'
-        },
-        {
-          id: '000000012',
-          title: 'ABCD 版本发布',
-          description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-          extra: '进行中',
-          status: 'processing',
-          type: '待办'
-        }
-      ]);
-
-      this.loading = false;
-    }, 500);
+    if (this.loading()) return;
+    this.loading.set(true);
+    timer(500)
+      .pipe(
+        takeUntilDestroyed(this.d$),
+        finalize(() => this.loading.set(false))
+      )
+      .subscribe(() => {
+        const now = new Date();
+        this.list.set([
+          {
+            id: '000000001',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+            title: '你收到了 14 份新周报',
+            datetime: add(now, { days: 10 }),
+            type: '通知',
+            extra: '点击移除'
+          },
+          {
+            id: '000000002',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+            title: '你推荐的 曲妮妮 已通过第三轮面试',
+            datetime: add(now, { days: -3 }),
+            type: '通知'
+          },
+          {
+            id: '000000003',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+            title: '这种模板可以区分多种通知类型',
+            datetime: add(now, { months: -3 }),
+            read: true,
+            type: '通知'
+          },
+          {
+            id: '000000004',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+            title: '左侧图标用于区分不同的类型',
+            datetime: add(now, { years: -1 }),
+            type: '通知'
+          },
+          {
+            id: '000000005',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+            title: '内容不要超过两行字，超出时自动截断',
+            datetime: '2017-08-07',
+            type: '通知'
+          },
+          {
+            id: '000000006',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+            title: '曲丽丽 评论了你',
+            description: '描述信息描述信息描述信息',
+            datetime: '2017-08-07',
+            type: '消息'
+          },
+          {
+            id: '000000007',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+            title: '朱偏右 回复了你',
+            description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+            datetime: '2017-08-07',
+            type: '消息'
+          },
+          {
+            id: '000000008',
+            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+            title: this.titleTpl(),
+            description: this.descTpl(),
+            datetime: '2017-08-07',
+            type: '消息'
+          },
+          {
+            id: '000000009',
+            title: '任务名称',
+            description: '任务需要在 2017-01-12 20:00 前启动',
+            extra: '未开始',
+            status: 'todo',
+            type: '待办'
+          },
+          {
+            id: '000000010',
+            title: '第三方紧急代码变更',
+            description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+            extra: '马上到期',
+            status: 'urgent',
+            type: '待办'
+          },
+          {
+            id: '000000011',
+            title: '信息安全考试',
+            description: '指派竹尔于 2017-01-09 前完成更新并发布',
+            extra: '已耗时 8 天',
+            status: 'doing',
+            type: '待办'
+          },
+          {
+            id: '000000012',
+            title: 'ABCD 版本发布',
+            description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+            extra: '进行中',
+            status: 'processing',
+            type: '待办'
+          }
+        ]);
+      });
   }
 
   clear(type: string): void {
     this.msg.success(`清空了 ${type}`);
+    this.list.set([]);
   }
 
   select(res: NoticeIconSelect): void {
     this.msg.success(`点击了 ${res.title} 的 ${res.item.title}`);
+    if (res.item.extra === '点击移除') {
+      this.msg.info(`执行了移除操作`);
+      this.list.set([...this.list().filter(w => w.id !== res.item.id)]);
+    }
   }
 
   showOK(): void {
diff --git a/packages/abc/notice-icon/style/index.less b/packages/abc/notice-icon/style/index.less
index 465ce9bda6..2de90c22ec 100644
--- a/packages/abc/notice-icon/style/index.less
+++ b/packages/abc/notice-icon/style/index.less
@@ -113,6 +113,10 @@
       margin-right: 0;
       font-weight: normal;
       color: @text-color-secondary;
+
+      .@{ant-prefix}-tag {
+        margin-right: 0;
+      }
     }
   }
 }