Open In App

Angular PrimeNG TabView Templates

Improve
Improve
Like Article
Like
Save
Share
Report

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. In this article, we will see how to use the TabView Templates in Angular PrimeNG.

Angular PrimeNG facilitates the TabView component that acts as a container, in order to group the content with the tab. The TabView Templates are used to give templates to the TabView component. Templates are used to set the header and content of the TabView content.

Syntax:

<p-tabPanel header="..">
  <ng-template pTemplate="content">
    <p>Content</p>
  </ng-template>
</p-tabPanel>

 

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

 

Example 1: Below is a simple example demonstrating the use of the Angular PrimeNG TabView Templates, where we are using header templates for giving a header to the tabview component.

  • app.component.html

HTML




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tabview Template</h4>
  
<p-tabView>
    <p-tabPanel header="Coding">
        <p>Code Here</p>
    </p-tabPanel>
    <p-tabPanel header="Web Technologies">
        <p>Learn About Web Technologies</p>
    </p-tabPanel>
    <p-tabPanel header="Articles">
        <p>Read Some Technical Articles</p>
    </p-tabPanel>
</p-tabView>


  • app.component.ts

Javascript




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


  • app.module.ts

Javascript




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 { }


Output:

 

Example 2: Below is another example demonstrating the use of the Angular PrimeNG TabView Template, where we are using header and content, defined with the help of the ng-templates tag.

  • app.component.html

HTML




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tabview Template</h4>
  
<p-tabView>
    <p-tabPanel header="Coding">
        <ng-template pTemplate="content">
            <p>Code Here</p>
        </ng-template>
    </p-tabPanel>
    <p-tabPanel header="Web Technologies">
        <ng-template pTemplate="content">
            <p>Learn About Web Technologies</p>
        </ng-template>
    </p-tabPanel>
    <p-tabPanel header="Articles">
        <ng-template pTemplate="content">
            Read Some Technical Articles
        </ng-template>
    </p-tabPanel>
</p-tabView>


  • app.component.ts

Javascript




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


  • app.module.ts

Javascript




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 { }


Output:

 

Reference: https://primefaces.org/primeng/tabview



Last Updated : 25 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads