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": [
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
  //...
]

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: [
 BrowserAnimationsModule,
 BrowserModule,
 DockModule
 ], 
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%">
    </ng-template>
</p-dock>

Now our code is ready to run :