New to angular and PrimeNG. Which Template best to learn from.

[mikeshugar]

Hi,

I'm a long time Java and C++ dev, but new to HTML, JS, angular, and PrimeNG. I want to buy a template, not so much to use, but to learn Angular, PrimeNG, and CSS.

Is one better than the others for learning PrimeNG techniques?

Is there a comparison matrix that shows the features and price of all templates?

It looks like some templates lack some features, like ability to change them. Is that correct or am i missing something?

Thanks

[quekqh]

I've been using primeng library for awhile. It's a really good library I must say.

The components can be customised to your liking. You need to insert a class and set View.Encapsulation to ShadowDom if you want to have separate styling files for your components instead of styles.scss. (I use to use /deep/ but it's deprecated.

I'm using the free tier - but if you want to buy go ahead.

[yigitfindikli]

Hi,

I'm a long time Java and C++ dev, but new to HTML, JS, angular, and PrimeNG. I want to buy a template, not so much to use, but to learn Angular, PrimeNG, and CSS.

Is one better than the others for learning PrimeNG techniques?

Is there a comparison matrix that shows the features and price of all templates?

It looks like some templates lack some features, like ability to change them. Is that correct or am i missing something?

Thanks

Hi,
Firstly welcome! You can learning from our showcase at https://www.primefaces.org/primeng/#/ . If you want buy a theme you can consider sapphire (Because it's newest theme in the PrimeNG.) or you can choose another theme, all PrimeNG themes are usefull and beatiful.
Best Regards.

[rokimoki]

Yeah, also don't forget this library (Framework) has a theming tool too. But showcase theme is enough to learn.

I've been using primeng library for awhile. It's a really good library I must say.

The components can be customised to your liking. You need to insert a class and set View.Encapsulation to ShadowDom if you want to have separate styling files for your components instead of styles.scss. (I use to use /deep/ but it's deprecated.

I'm using the free tier - but if you want to buy go ahead.

Can you provice an example code? I am interested to know what do you mean, I am planing to do some kind of PrimeNG customization, but some components need to be rendered post creation, can't use [style] or [styleClass] to override some css properties.

[quekqh]

Here's an example for select button. Hope it helps

app.component.ts

Code: Select all

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

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

app.component.html

Code: Select all

<p-selectButton
    styleClass="profile-select-button"
    [options]="options"
    [(ngModel)]="option"
    (click)="onClickTabButton(option)"
  ></p-selectButton>

app.component.scss

Code: Select all

.profile-select-button {
  .ui-button.ui-state-default {
    background: $color-white;
    color: $color-text-dark;
    border: 2px solid $color-border;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;

    &.ui-state-active {
      border: 2px solid $color-primary;
      outline: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    &.ui-state-disabled {
      color: $color-disabled;
      border: 2px solid $color-disabled;
    }

    &:hover:enabled {
      cursor: pointer;
    }
  }
}

[rokimoki]

Aaaah of course, including prime ng class in your css class... I don't know how I could not realize that, thanks!!