Angular PrimeNG Dock Component
Last Updated :
14 Nov, 2022
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 Component.
The Dock component in Angular PrimeNG is a navigation component that acts as a menu item. The dock component 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 different components of the Dock, provided by the Angular PrimeNG, are described below:
- Basic: The Basic dock just contains the Dock menu element with the items inside it.
- Advanced: In the advanced dock, we can dynamically provide the data to the dock menu.
- Properties: The different styling & class as a property, are passed to the main container element.
- Styling: The different structural style classes can be used with the Dock, in order to enhance its styling.
Syntax:
<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>
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 menu with some image items.
HTML
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Dock Component</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>
|
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',
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:
},
{
label: 'GfgLogo 2',
icon:
},
{
label: 'GfgLogo 3',
icon:
},
{
label: 'GfgLogo 4',
icon:
},
];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
|
Javascript
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { DockModule } from 'primeng/dock';
import { AppComponent } from './app.component';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
RippleModule,
FormsModule,
ImageModule,
DockModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
Output:
Example 2: In the following example, we have changed the position of the dock component.
HTML
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Dock Component</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>
<p-dock [model]="dockItems" position="left">
<ng-template pTemplate="item" let-item>
<img [src]="item.icon"
[alt]="item.label"
width="100%" />
</ng-template>
</p-dock>
<p-dock [model]="dockItems" position="right">
<ng-template pTemplate="item" let-item>
<img [src]="item.icon"
[alt]="item.label"
width="100%" />
</ng-template>
</p-dock>
|
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',
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:
},
{
label: 'GfgLogo 2',
icon:
},
{
label: 'GfgLogo 3',
icon:
},
{
label: 'GfgLogo 4',
icon:
},
];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
|
Javascript
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { DockModule } from 'primeng/dock';
import { AppComponent } from './app.component';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
RippleModule,
FormsModule,
ImageModule,
DockModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
Output:
Reference: https://primefaces.org/primeng/dock
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...