Angular PrimeNG TabView可关闭

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用TabView Closable。我们还将学习属性、事件和造型，以及代码中使用的语法。

TabView组件用于以标签的形式显示内容。

Angular PrimeNG TabView可关闭的属性：

header。它指定了tabPanel的标题。它是字符串数据类型，默认值为空。
closable。它定义了标签是否可以被移除。它是布尔数据类型，默认值为false。
selected:它定义了标签是否被激活。它是布尔数据类型，默认值是false。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像以下内容

Angular PrimeNG TabView可关闭

**运行以下命令以查看输出。

ng serve --open

例子1：这是一个基本的例子，说明了如何使用Angular PrimeNG TabView Closable。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Closable</h5>
  
<p-tabView>
    <p-tabPanel header="Geek 1" 
       [closable]="true">
      <p>
        Welcome geek 1 Angular PrimeNG is an 
        open-source framework with a rich set
        of native Angular UI components that 
        are used for great styling and this
        framework is used to make responsive 
        websites with very much ease.
      </p>
    </p-tabPanel>
  
    <p-tabPanel header="Geek 2" tooltip="geek 2" 
      [closable]="true">
     <p>
        Welcome geek 2 Angular PrimeNG is an 
        open-source framework with a rich set
        of native Angular UI components that 
        are used for great styling and this
        framework is used to make responsive 
        websites with very much ease.
      </p>
    </p-tabPanel>
  
    <p-tabPanel header="Geek 3" tooltip="geek 3" 
       [closable]="true">
      <p>
        Welcome geek 3 Angular PrimeNG is an 
        open-source framework with a rich set
        of native Angular UI components that 
        are used for great styling and this
        framework is used to make responsive 
        websites with very much ease.
      </p>
    </p-tabPanel>
</p-tabView>

import { Component, OnInit, ViewEncapsulation } 
    from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
  
export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TabViewModule } from 'primeng/tabview';
  
@NgModule({
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TabViewModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG TabView可关闭

例子2：这是另一个例子，说明了如何使用Angular PrimeNG TabView Closable，使用内容作为图像。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Closable</h5>
  
<p-tabView>
  <p-tabPanel header="Geek 1" [closable]="true">
    <p>
      <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220228120243/gfglogo.png">
    </p>
  </p-tabPanel>
    
  <p-tabPanel header="Geek 2" [closable]="true">
    <p>
      <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220303124953/gfglogo1.png">
    </p>
  </p-tabPanel>
    
  <p-tabPanel header="Geek 3" [closable]="true">
    <p>
      <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807211225/unnamed-300x300.jpg">
    </p>
  </p-tabPanel>
</p-tabView>

import { Component, OnInit, ViewEncapsulation } 
    from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
  
export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TabViewModule } from 'primeng/tabview';
  
@NgModule({
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TabViewModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG TabView可关闭