Dock In Angular Using PrimeNG

Here, we are going to learn about Dock  using primeng . In order to use dock, we will install primeng in our project using following npm command:

  • npm install primeng

Add following path in  angular.json file :

"styles": [

Import following modules in 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';

@NgModule({ declarations: [AppComponent],
 imports: [
providers: [], 
bootstrap: [AppComponent] 

Import following modules in app.component.ts :

import { Component} from '@angular/core';
import {DockModule} from 'primeng/dock';

@Component({ selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.scss'] })

export class AppComponent implements OnInit{
   dockItems: any = [];

    ngOnInit() {
    this.dockItems = [
        label: 'Finder',
        icon: `../assets/images/finder.png`
        label: 'App Store',
        icon: `../assets/images/appstore.jpg`
        label: 'Photos',
        icon: `../assets/images/gallary.png`
        label: 'Trash',
        icon: `../assets/images/trash.jpg`
        label: 'Files',
        icon: `../assets/images/files.png`


Import following modules in app.component.html :

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

Now our code is ready to run :

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories