I have issues with the styles

[chvallej]

Hi team

I just started with prime blocks for primeNG. I have copied one of the blocks to run in my application, but seem to be that i have some issues with the style. I copied a side bar layout block "Dim Sidebar with Topbar". The topbar is being rendered wiith a bigger size, the icons does not look good.

This is how looks when I run the primeblocks project

But this is how looks when a I used the block of code in my project. The red circle is bigger

Can someone support me how are the steps to use the block of code?

My steps were:

Install primeng, primeicons, primeflex
Set a default primeng theme in my case I using

<link
      id="theme-link"
      rel="stylesheet"
      type="text/css"
      href="/assets/css/themes/bootstrap4-light-blue/theme.css"

my styles.css has the below information

@import 'primeng/resources/primeng.min.css';
@import 'primeflex/primeflex.css';
@import 'primeicons/primeicons.css';

[cetincakiroglu]

Hi,

You need to import related components from PrimeNG. The example on the website uses the components below. Could you please check the imports?

BadgeModule,
RippleModule,
StyleClassModule,
SelectButtonModule,
ButtonModule

[chvallej]

Hi

I have imported those modules like the example. My component looks as below

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InputTextModule } from 'primeng/inputtext';
import { BadgeModule } from 'primeng/badge';
import { RippleModule } from 'primeng/ripple';
import { StyleClassModule } from 'primeng/styleclass';
import { SelectButtonModule } from 'primeng/selectbutton';
import { FormsModule } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { PrimeNGConfig } from 'primeng/api';
@Component({
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    InputTextModule,
    BadgeModule,
    RippleModule,
    StyleClassModule,
    SelectButtonModule,
    ButtonModule,
  ],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  title = 'frontend';
  base!: BaseModel;

  constructor(private primengConfig: PrimeNGConfig) {}
  ngOnInit(): void {
    this.primengConfig.ripple = true;
  }
}