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
<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
:host ::ng-deep .p-dock { border: 12px green;
border-style: solid;
border-radius: 100px;
padding: 2px;
} |
- app.component.ts
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:
},
{
label: 'GfgLogo 2',
icon:
},
{
label: 'GfgLogo 3',
icon:
},
{
label: 'GfgLogo 4',
icon:
},
];
}
} export interface Tutorial { title?: string;
category?: string;
rating?: number;
} |
- app.module.ts
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
<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
: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
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:
},
{
label: 'GfgLogo 2',
icon:
},
{
label: 'GfgLogo 3',
icon:
},
{
label: 'GfgLogo 4',
icon:
},
];
}
} export interface Tutorial { title?: string;
category?: string;
rating?: number;
} |
- app.module.ts
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