Open In App

Angular PrimeNG Divider Properties

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 know how to use the Divider component properties in Angular PrimeNG. 

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

Angular PrimeNG  Divider Properties:

  • align: It is used to set the alignment of the content. It is of string data type & the default value is null.
  • layout: It is used to specify the orientation. It is of string data type & the default value is horizontal.
  • type: It is the border style type. It is of string data type & the default value is solid.
  • style: It is the inline style of the component. It is of object data type & the default value is null.
  • styleClass: It is the style class of the component. It is of string data type & the default value is null.

Approach: Let us create an Angular project and install the PrimeNG UI module. Then we will create a UI that will showcase Angular PrimeNG  Divider Properties.

Creating React Project:

Step 1: To create an angular app, you need to install the angular command line interface through the npm command.

npm install -g angular-cli

Step 2: Now we will create an angular project.

ng new project_name

Step 3: After creating your react project, move into the folder to perform different operations.

cd project_name

Step 4: After creating the Angular application, Install the required module using the following command:

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

Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor, you can see a similar project structure as shown below. The new component user makes or the code changes, we will be performing will be done in the source folder.    

Project Structure

Step to Run Application: Run the application using the following command from the root directory of the project:

ng serve --open

Example 1: We are creating a UI that shows PrimeNG Divider Properties.

  • app.component.html 

HTML




<div style="margin:100px">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>
        Angular PrimeNG PrimeNG Divider Properties
    </h3>
    <p-divider type="dotted">
        Dotted Type Divider
    </p-divider>
    <h2>
        DSA Self Paced Course
    </h2>
    <p-divider type="dashed">
        Dashed Type Divider
    </p-divider>
    <p> Most popular course on DSA trusted by
        over 75,000 students! Built with years
        of experience by industry experts and
        gives you a complete package of video
        lectures, practice problems, quizzes,
        discussion forums and contests.<br />
        Start Today !
    </p>
    <p-divider type="solid">
        Solid Type Divider
    </p-divider>
</div>


  • app.module.ts

Javascript




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


Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

 

Example 2: We are creating a UI that shows PrimeNG Divider Properties.

  • app.component.html

HTML




<div style="margin:100px">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG PrimeNG Divider Properties</h3>
    <p>Geeks For Geeks - Billions of Users, 
        Millions of Articles Published, Thousands Got Hired by
        Top Companies and the numbers are still growing.
    </p>
    <p-divider align="right">Right Aligned Divider</p-divider>
    <p>Geeks For Geeks - Billions of Users, 
        Millions of Articles Published, Thousands Got Hired by
        Top Companies and the numbers are still growing.
    </p>
    <p-divider align="center">Center Aligned Divider</p-divider>
    <p>Geeks For Geeks - Billions of Users, 
        Millions of Articles Published, Thousands Got Hired by
        Top Companies and the numbers are still growing.
    </p>
    <p-divider align="left">Left Aligned Divider</p-divider>
</div>


  • app.module.ts

Javascript




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


Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

 

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



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