CODEWITHSUNDEEP
javascriptangularsassprimengstyling
Robby
Robby

Reputation: 93

how to style dynamically assign background to p-card of primeng?

I have to assign background to p-card (of primeng) depending upon the status. Example: red if status is failed, yellow for warning and green for success.

Upvotes: 1

Views: 7122

Answers (2)

Oleksii Pavlenko
Oleksii Pavlenko

Reputation: 1333

First of all disable Disable view encapsulation in your component, and then add the styles,

@Component({
 selector: 'my-component',
 templateUrl: './app/components/my.html',
 styleUrls: ['./app/components/my.css'],
 encapsulation: ViewEncapsulation.None
})

And than add some getter for ngClass to yours p-card

Upvotes: 0

Robby
Robby

Reputation: 93

one way i have figured is using style property. The style property of p-card expects an object. So if we manipulate that object, we can change the bg color.

<p-card header="Simple Card" [style]="styleOBJ">
    some text
</p-card>

// in .ts file
styleOBJ = {'background':'lightblue'}
if(status == 'success') {
    styleOBJ = {'background':'green'}
} else ...

Upvotes: 5

Related Questions