Angular PrimeNG Dock 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. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Dock Styling.

The Dock component in Angular PrimeNG is a navigation component that acts as a menu item & it resembles the dock menu in Ubuntu OS or Mac OS. The Dock menu item is built on MenuItem of PrimeNG and provides many functionalities. The Dock Styling allows modification of the default styling of the component by using the classes of the component.

Angular PrimeNG Dock Styling classes:

• p-dock: It is the container element.
• p-dock-list: It is the list of items.
• p-dock-item: It is each item in the list.

Syntax:

:host ::ng-deep .p-dock {
    border: 2px green;
    border-style: dashed;
    padding: 2px;
}

Creating Angular application & Module Installation:

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

ng new geeks_angular

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

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

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

Project Structure: The project structure will look like the following:

Example 1: In the following example, we have a Dock with a border around it.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>Angular PrimeNG Dock Styling</h3>

<p-dock [model]="dockItems"
        position="bottom">
  <ng-template pTemplate="item" let-item>
    <img [src]="item.icon"
         [alt]="item.label"
         width="100%" />
  </ng-template>
</p-dock>

• app.component.css

CSS

:host ::ng-deep .p-dock {
  border: 12px green;
  border-style: solid;
  border-radius: 100px;
  padding: 2px;
}

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig, MenuItem } from 'primeng/api';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService],
})
export class AppComponent {
    dockItems: MenuItem[];
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
        this.dockItems = [
            {
                label: 'GfgLogo 1',
                icon:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png',
            },
            {
                label: 'GfgLogo 2',
                icon:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210423141844/Logo1.png',
            },
            {
                label: 'GfgLogo 3',
                icon:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png',
            },
            {
                label: 'GfgLogo 4',
                icon:
'https://media.geeksforgeeks.org/wp-content/uploads/20210511160813/g4g.jpg',
            },
        ];
    }
}
export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { DockModule } from 'primeng/dock';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
@NgModule({
    imports: [BrowserModule,
              BrowserAnimationsModule,
              ImageModule,
              DockModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In the following example, we have added a shadow and border around each dock item.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>Angular PrimeNG Dock Styling</h3>

<p-dock [model]="dockItems"
        position="bottom">
  <ng-template pTemplate="item" let-item>
    <img [src]="item.icon"
         [alt]="item.label"
         width="100%" />
  </ng-template>
</p-dock>

• app.component.css

CSS

:host ::ng-deep .p-dock-item {
  border: 1px green;
  border-style: solid;
  border-radius: 20px;
  margin: 2px;
  box-shadow: 4px 4px 4px green;
}

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig, MenuItem } from 'primeng/api';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService],
})
export class AppComponent {
    dockItems: MenuItem[];
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
        this.dockItems = [
            {
                label: 'GfgLogo 1',
                icon:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png',
            },
            {
                label: 'GfgLogo 2',
                icon:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210423141844/Logo1.png',
            },
            {
                label: 'GfgLogo 3',
                icon:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png',
            },
            {
                label: 'GfgLogo 4',
                icon:
'https://media.geeksforgeeks.org/wp-content/uploads/20210511160813/g4g.jpg',
            },
        ];
    }
}
export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { DockModule } from 'primeng/dock';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
@NgModule({
    imports: [BrowserModule,
              BrowserAnimationsModule,
              ImageModule,
              DockModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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