Tieredmenu in PrimeNG

0
votes

Angular 2, v. 2.0.0 + PrimeNG. I would implement popup menu like this:

enter image description here

I install PrimeNG in my project with this command -> npm install primeng --save, and import TieredMenuModule in my app.module.ts -> import {TieredMenuModule} from "primeng/primeng". Then i create component and import MenuItem -> import {MenuItem} from 'primeng/primeng', and all styles from node_modules (in my component of course):

import "../../../node_modules/primeng/resources/primeng.min.css"; 
import "../../../node_modules/primeng/resources/themes/omega/theme.css"; 
import "../../assets/font-awesome/css/font-awesome.min.css";

Then i add private items: MenuItem[] and ngOnInit() function:

 public ngOnInit(): void {
    this.items = [ ... ]
 }

In my template i past this code:

<p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>
<button #btn type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

After all i get this:

enter image description here

The button are not blue and without label.

May be proble with style, or i dont import one more thing?

1
angularprimeng

1 Answers

1
votes

instead of importing all css in your component import all in the angular-cli.json file under the css object like this -

"styles": [
    "../node_modules/primeui/primeui-ng-all.min.css",
    "...."
],