Angular PrimeNG Divider Styling

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