在Angular框架中，标签输入组件是一种非常有用的功能，它允许开发者通过标签方式输入信息，使用户界面更加直观和易于使用。在本文中，我们将深入探讨Angular中的标签输入组件，并提供一个简单而实用的案例代码，以帮助您更好地理解和应用这一特性。

typescript
// tag-input.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-tag-input',
  templateUrl: './tag-input.component.html',
  styleUrls: ['./tag-input.component.css']
})
export class TagInputComponent {
  newTag: string = '';
  @Output() tagAdded: EventEmitter = new EventEmitter();
  addTag() {
    if (this.newTag.trim() !== '') {
      this.tagAdded.emit(this.newTag.trim());
      this.newTag = '';
    }
  }
}

html
Add

typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tags: string[] = [];
  addTag(tag: string) {
    this.tags.push(tag);
  }
}

html
Task Management
Tags:
  
{{ tag }}