feat(module:tag): support fully control by user

components/tag/demo/full-control-checkable.md

@@ -0,0 +1,16 @@
+---
+order: 4
+title:
+  zh-CN: 完整控制可选择
+  en-US: FullControlCheckable
+---
+
+## zh-CN
+
+`Tag` 的状态完全由用户接管，不再自动根据点击事件改变数据。
+
+## en-US
+
+The status of `Tag` is completely up to the user and no longer automatically changes the data based on the click event.
+
+

components/tag/demo/full-control-checkable.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-tag-full-control-checkable',
+  template: `
+    <nz-tag nzMode="checkable" [nzChecked]="checked" [nzControl]="true">Tag</nz-tag>
+    <nz-switch [(ngModel)]="checked"></nz-switch>
+  `
+})
+export class NzDemoTagFullControlCheckableComponent {
+  checked = false;
+}

components/tag/doc/index.en-US.md

@@ -21,6 +21,7 @@ Tag for categorizing or markup.
 | `[nzMode]` | Mode of tag | `'closeable'｜'default'｜'checkable'` | `'default'` |
 | `[nzChecked]` | Checked status of Tag, double binding, only works when `nzMode="checkable"` | `boolean` | `false` |
 | `[nzColor]` | Color of the Tag | `string` | - |
+| `[nzControl]` | determine whether fully control state by user  | `boolean` | `false` |
 | `(nzAfterClose)` | Callback executed when close animation is completed, only works when `nzMode="closable"` | `EventEmitter<void>` | - |
 | `(nzOnClose)` | Callback executed when tag is closed, only works when `nzMode="closable"`| `EventEmitter<MouseEvent>` | - |
 | `(nzCheckedChange)` | Checked status change call back, only works when `nzMode="checkable"` | `EventEmitter<boolean>` | - |

components/tag/doc/index.zh-CN.md

@@ -21,6 +21,7 @@ title: Tag
 | `[nzMode]` | 设定标签工作的模式 | `'closeable'｜'default'｜'checkable'` | `'default'` |
 | `[nzChecked]` | 设置标签的选中状态，可双向绑定，在 `nzMode="checkable"` 时可用 | `boolean` | `false` |
 | `[nzColor]` | 标签色 | `string` | - |
+| `[nzControl]` | 是否完全由用户控制状态 | `boolean` | `false` |
 | `(nzAfterClose)` | 关闭动画完成后的回调，在 `nzMode="closable"` 时可用 | `EventEmitter<void>` | - |
 | `(nzOnClose)` | 关闭时的回调，在 `nzMode="closable"` 时可用 | `EventEmitter<MouseEvent>` | - |
 | `(nzCheckedChange)` | 设置标签的选中状态的回调，在 `nzMode="checkable"` 时可用 | `EventEmitter<void>` | - |

components/tag/nz-tag.component.ts

@@ -34,6 +34,7 @@ export class NzTagComponent implements OnInit, OnChanges {
   presetColor = false;
   @Input() nzMode: 'default' | 'closeable' | 'checkable' = 'default';
   @Input() nzColor: string;
+  @Input() @InputBoolean() nzControl: boolean = false;
   @Input() @InputBoolean() nzChecked: boolean = false;
   @Input() @InputBoolean() nzNoAnimation: boolean = false;
   @Output() readonly nzAfterClose = new EventEmitter<void>();
@@ -62,7 +63,7 @@ export class NzTagComponent implements OnInit, OnChanges {
   }
 
   updateCheckedStatus(): void {
-    if (this.nzMode === 'checkable') {
+    if (this.nzMode === 'checkable' && !this.nzControl) {
       this.nzChecked = !this.nzChecked;
       this.nzCheckedChange.emit(this.nzChecked);
       this.updateClassMap();

components/tag/nz-tag.spec.ts

@@ -43,6 +43,19 @@ describe('tag', () => {
       expect(testComponent.checkedChange).toHaveBeenCalledTimes(1);
       expect(tag.nativeElement.classList).toContain('ant-tag-checkable');
       expect(tag.nativeElement.classList).toContain('ant-tag-checkable-checked');
+      testComponent.control = true;
+      testComponent.checked = true;
+      fixture.detectChanges();
+      expect(testComponent.checked).toBe(true);
+      expect(testComponent.checkedChange).toHaveBeenCalledTimes(1);
+      expect(tag.nativeElement.classList).toContain('ant-tag-checkable');
+      expect(tag.nativeElement.classList).toContain('ant-tag-checkable-checked');
+      testComponent.checked = false;
+      fixture.detectChanges();
+      expect(testComponent.checked).toBe(false);
+      expect(testComponent.checkedChange).toHaveBeenCalledTimes(1);
+      expect(tag.nativeElement.classList).toContain('ant-tag-checkable');
+      expect(tag.nativeElement.classList).not.toContain('ant-tag-checkable-checked');
     });
     it('should closeable work', fakeAsync(() => {
       fixture.detectChanges();
@@ -114,6 +127,7 @@ describe('tag', () => {
       [nzMode]="mode"
       [(nzChecked)]="checked"
       [nzColor]="color"
+      [nzControl]="control"
       (nzCheckedChange)="checkedChange($event)"
       (nzAfterClose)="afterClose()"
       (nzOnClose)="onClose()"
@@ -126,6 +140,7 @@ export class NzTestTagBasicComponent {
   mode = 'default';
   color: string | undefined;
   checked = false;
+  control = false;
   onClose = jasmine.createSpy('on close');
   afterClose = jasmine.createSpy('after close');
   checkedChange = jasmine.createSpy('after close');
@@ -140,4 +155,4 @@ export class NzTestTagPreventComponent {
   onClose(e: MouseEvent): void {
     e.preventDefault();
   }
-}
+}