Angular PrimeNG Skeleton Properties

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Skeleton Properties.

The Skeleton Component is used as a placeholder while the data for the actual component is loading in the background. The properties of the skeleton component are listed below.

Angular PrimeNG Skeleton Properties:

• shape: This property specifies the shape of the skeleton component. It accepts string values. The options are “rectangle” and “circle”.
• size: This property specifies the size of the skeleton element.
• width: This property specifies the width of the skeleton component. It accepts string values and the default value is “100%”.
• height: This property specifies the height of the skeleton component. It accepts string values and the default value is “1rem”.
• borderRadius: This property specifies the values of the border radius of the skeleton. It takes the default value from the theme you have applied.
• animation: It specifies the animation to be applied to the skeleton. It accepts string values and the accepted values are “Wave” and “none”.
• style: It is the Inline style of the element.
• styleClass: It is the style class of the element.

Syntax:

<p-skeleton
    shape="..." 
    width="..." 
    height="...">
</p-skeleton>

Creating Angular Application and Installing the Modules:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Run the below command to run the application:

ng serve --open

Example 1: This example illustrates how to create rectangular and rounded skeleton elements using the borderRadius, height, and width properties.

app.component.html

<div
    class="page-content"
    style="height: calc(100vh - 149px)">

    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Skeleton Properties</h4>

    <h3>Rectangular Skeleton Elements</h3>
    <p-skeleton
        height="1rem"
        width="50%"
        styleClass="mb-4">
    </p-skeleton>

    <p-skeleton
        height="2rem"
        width="65%"
        styleClass="mb-4">
    </p-skeleton>

    <p-skeleton
        height="3rem"
        width="80%"
        styleClass="mb-4">
    </p-skeleton>

    <p-skeleton
        height="4rem"
        width="100%"
        styleClass="mb-4">
    </p-skeleton>

    <h3>Rounded Skeleton Elements</h3>
    <p-skeleton
        height="1rem"
        width="50%"
        borderRadius="30px"
        styleClass="mb-4">
    </p-skeleton>

    <p-skeleton
        height="2rem"
        width="65%"
        borderRadius="30px"
        styleClass="mb-4">
    </p-skeleton>

    <p-skeleton
        height="3rem"
        width="80%"
        borderRadius="30px"
        styleClass="mb-4">
    </p-skeleton>

    <p-skeleton
        height="4rem"
        width="100%"
        borderRadius="30px"
        styleClass="mb-4">
    </p-skeleton>
</div>

app.component.ts

import { Component } from '@angular/core';

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

import { SkeletonModule } from 'primeng/skeleton';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        SkeletonModule

    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This example illustrates how to create the square and rounded skeleton elements using the size and shape properties.

app.component.html

<div
    class="page-content"
    style="height: calc(100vh - 149px)">

    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Skeleton Properties</h4>

    <h3>Square Skeleton Elements</h3>
    <div class="flex align-items-center">
        <p-skeleton
            size="5rem"
            styleClass="mr-4">
        </p-skeleton>

        <p-skeleton
            size="8rem"
            styleClass="mr-4">
        </p-skeleton>

        <p-skeleton size="13rem">
        </p-skeleton>
    </div>

    <h3>Circular Skeleton Elements</h3>
    <div class="flex align-items-center">
        <p-skeleton
            size="5rem"
            shape="circle"
            styleClass="mr-4">
        </p-skeleton>

        <p-skeleton
            size="8rem"
            shape="circle"
            styleClass="mr-4">
        </p-skeleton>

        <p-skeleton
            shape="circle"
            size="13rem">
        </p-skeleton>
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

import { SkeletonModule } from 'primeng/skeleton';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        SkeletonModule

    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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