Open In App

Angular PrimeNG Divider Styling

Last Updated : 26 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
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 the Angular PrimeNG  Divider Styling.

The Divider Component is used to make a component that divides the content using a divider.

Angular PrimeNG Divider Styling:

  • p-divider: It is the container element.
  • p-divider-horizontal: It is the container element in a horizontal layout.
  • p-divider-vertical: It is the container element in a vertical layout.
  • p-divider-solid: It is the container element with a solid border.
  • p-divider-dashed: It is the container element with a dashed border.
  • p-divider-dotted: It is the container element with a dotted border.
  • p-divider-left: It is the container element with content aligned to left.
  • p-divider-right: It is the container element with content aligned to right.
  • p-divider-center: It is the container element with content aligned to the center.
  • p-divider-bottom: It is the container element with content aligned to the bottom.
  • p-divider-top: It is the container element with content aligned to the top.
 

Syntax:

<p-divider></p-divider>

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: This example describes the basic usage of the Angular PrimeNG  Divider Styling by implementing the p-divider-solid, p-divider-dashed, and p-divider-dotted, along with using the icons & badges.

  • app.component.html
HTML 
<h1 style="color: green">
    GeeksforGeeks
</h1>
<h2>
    Angular PrimeNG Divider Styling
</h2>

<div style="width: 70%;">
    <p-divider align="right" 
               type="dashed">
        <div class="inline-flex 
                    align-items-center">
            <i class="pi pi-search mr-1"></i>
            <b>
                Search Icon with right aligned Dashed Line 
            </b>
        </div>
    </p-divider>

    <p>
        Angular PrimeNG is a framework used with
        angular to create components with
        great styling and this framework is very
        easy to use and is used to make
        responsive websites.
    </p>

    <p-divider type="solid" 
               align="center">
        <b>Divider solid</b>
    </p-divider>

    <p>
        Angular PrimeNG is a framework used with
        angular to create components with
        great styling and this framework is very
        easy to use and is used to make
        responsive websites.
    </p>
    <p-divider align="left" 
               type="dotted">
        <span class="p-tag">
            Badge with dotted line
        </span>
    </p-divider>

    <p>
        Angular PrimeNG is a framework used with
        angular to create components with
        great styling and this framework is very
        easy to use and is used to make
        responsive websites.
    </p>
</div>
  • app.component.ts
JavaScript 
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent { }
  • app.module.ts
JavaScript 
import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DividerModule } from 'primeng/divider';

@NgModule({
    imports: [BrowserModule,
        BrowserAnimationsModule,
        DividerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we will be using the p-divider-left, p-divider-right, and p-divider-center.

  • app.component.html
HTML 
<h1 style="color: green">
  GeeksforGeeks
</h1>
<h2>
  Angular PrimeNG  Divider Styling
</h2>
<div style="width: 70%;">
    <p-divider  align="right" >
        <b>Divider Right</b>
    </p-divider>
    <p>
      Angular PrimeNG is a framework used with
      angular to create components with
      great styling and this framework is very
      easy to use and is used to make
      responsive websites.
    </p>

    <p-divider align="left">
        <b>Divider Left</b>
    </p-divider>
    <p>
      Angular PrimeNG is a framework used with
      angular to create components with
      great styling and this framework is very
      easy to use and is used to make
      responsive websites.
    </p>
  
    <p-divider  align="center">
        <b>Divider Center</b>
    </p-divider>    
    <p>
        Angular PrimeNG is a framework used with
        angular to create components with
        great styling and this framework is very
        easy to use and is used to make
        responsive websites.  
   </p>
</div>
  • app.component.ts
JavaScript 
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {}
  • app.module.ts
JavaScript 
import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DividerModule } from 'primeng/divider';

@NgModule({
    imports: [BrowserModule,
        BrowserAnimationsModule,
        DividerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/divider


Next Article
Angular PrimeNG DataView Styling

N
nikitamehrotra1210
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox