Angular PrimeNG TabView程序化

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

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

语法:

<p-button 
    (click)="..." 
    label="...">
</p-button>

<p-tabView [(activeIndex)]="...">
    <p-tabPanel header="...">
        ...
    </p-tabPanel>
</p-tabView>

Angular PrimeNG TabView程序化属性：

header。它指定了tabPanel的标题。它是字符串数据类型，默认值为空。
selected:它定义了标签是否被激活。它是布尔数据类型，默认值是false。
activeIndex。它指定了活动标签的索引，以便以编程方式改变选定的标签。它接受数字数据类型，默认值为空。

创建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 Programmatic.。

app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angualar PrimeNG TabView Programmatic</h5>
  
<div class="card">
    <div>
        <p-button 
            (click)="gfg = 0" 
            label="Activate Geek 1">
        </p-button>
        <p-button 
            (click)="gfg = 1" 
            label="Activate Geek 2">
        </p-button>
        <p-button 
            (click)="gfg = 2" 
            label="Activate Geek 3">
        </p-button>
    </div>
  
    <p-tabView [(activeIndex)]="gfg">
        <p-tabPanel header="Geek I">
            <p>Welcome Geek 1</p>
        </p-tabPanel>
        <p-tabPanel header="Geek II">
            <p>Welcome Geek 2</p>
        </p-tabPanel>
        <p-tabPanel header="Geek III">
            <p>Welcome Geek 3</p>
        </p-tabPanel>
    </p-tabView>
</div>

app.component.ts:

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

app.module.ts:

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

输出:

Angular PrimeNG TabView程序化

例子2：这是另一个例子，说明了如何使用Angular PrimeNG TabView Programmatic使用图像。

app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angualar PrimeNG TabView Programmatic</h5>
  
<div class="card">
    <div>
        <p-button 
            (click)="gfg = 0" 
            label="Activate Course 1">
        </p-button>
        <p-button 
            (click)="gfg = 1" 
            label="Activate Course 2">
        </p-button>
        <p-button 
            (click)="gfg = 2" 
            label="Activate Course 3">
        </p-button>
    </div>
  
    <p-tabView [(activeIndex)]="gfg">
        <p-tabPanel header="Course 1">
            <p>
              <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/fullstacknodecourseoverviewimage-300x289.png" />
            </p>
          </p-tabPanel>
          <p-tabPanel header="Course 2">
            <p>
              <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/geeksclasseslivecourseoverviewimage-300x289.png" />
            </p>
          </p-tabPanel>
          <p-tabPanel header="Course 3" [selected]="true">
            <p>
              <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214720/competitiveprogramminglivecourseoverviewimage-300x289.png" />
            </p>
          </p-tabPanel>
    </p-tabView>
</div>

app.component.ts:

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

app.module.ts:

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

输出:

Angular PrimeNG TabView程序化