Import DataView component but missing CSS styles

[UserETSIST]

Dear community,

I hope this message reaches you well.

My question is related with the use of PrimeNG components in Angular 18:

When I try to import a DataView component [https://primeng.org/dataview#accessibility] in my project, it does not look as it appears in the webpage.

1. I have imported the module: import { DataViewModule } from 'primeng/dataview';
2. I've imported the style sheets in my 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",
   "@angular/material/prebuilt-themes/azure-blue.css",
   "src/styles.css"
   ],

My HTML is as follows:

_

<p-dataView #dv [value]="products" [rows]="2" [paginator]="true">

<div *ngFor="let item of products; let first = first" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" [ngClass]="{ 'border-top-1 surface-border': !first }">

<img class="block xl:block mx-auto border-round w-full" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
<p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)" class="absolute" [style.left.px]="4" [style.top.px]="4" />

{{ item.category }}

{{ item.name }}

{{ item.rating }}

{{ '$' + item.price }}

<p-button icon="pi pi-heart" [outlined]="true" />
<p-button icon="pi pi-shopping-cart" class="flex-auto md:flex-initial white-space-nowrap" label="Buy Now" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'" />

_

And my component .ts is as follows:

_import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { DataViewModule } from 'primeng/dataview';
import { ButtonModule } from 'primeng/button';
import { TagModule } from 'primeng/tag';

@component({
selector: 'app-preview-inmueble',
standalone: true,
imports: [DataViewModule, ButtonModule, TagModule, CommonModule],
templateUrl: './preview-inmueble.component.html',
styleUrl: './preview-inmueble.component.css'
})
export class PreviewInmuebleComponent {

public products = [
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
{
id: '1001',
code: 'nvklal433',
name: 'Black Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 72,
category: 'Accessories',
quantity: 61,
inventoryStatus: 'INSTOCK',
rating: 4
},
{
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 79,
category: 'Fitness',
quantity: 2,
inventoryStatus: 'LOWSTOCK',
rating: 3
}
];

getSeverity (product: any) {

switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';

  case 'LOWSTOCK':
      return 'warning';

  case 'OUTOFSTOCK':
      return 'danger';

  default:
      return undefined;

}
}
}_

So, it should look like:

But in my project it looks like:

Do you know if the styles doesn't come with the library and if they need to be set up mannually?

I really appreciate your attention to this topic.

[qwadrox]

Hi @UserETSIST! I think your problem is you're trying to use Material as well. You're importing:

"@angular/material/prebuilt-themes/azure-blue.css", (remove this)
It is not recommended to use the two ui library together as they will interfere in styling and ux.

[qwadrox]

Or… Sorry. You rather miss the primeflex import.
Try adding this to the head tag to see quickly:

<link href="https://unpkg.com/primeflex/primeflex.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />

see installation for more details: https://primeflex.org/installation

[qwadrox]

But despite don't use the two UI library together. It's discouraged.