Multiple Attributes in Ng-Style

Multiple attributes in ng-style

ng-style waits for an object literal, so you need to adjust your code to

$scope.css = {
 width: 'calc(100% -'+$scope.fixedColumnsWidth+')',
 'margin-left': $scope.fixedColumnsWidth
}

<div ng-style="css"></div>

Angular ngStyle for multiple styles

When you using ngStyle you should create a function returning one of the following: a string, an array or an object.

if you want to return an Object you do the following:

in your template:

<div [ngStyle]="styleObject()"></div>

in your component:

export class AppComponent{
 styleObject(): Object {
       if (/** YOUR CONDITION TO SHOW THE STYLES*/  ){
           return {height: this.height,width: this.width}
       }
       return {}
   }
}

How to apply multiple object property to ngStyle

Try this:

<span [ngStyle]="getColor(selectedOption?.type)">BLAH</span>

public getColor(type: string | undefined){

   if (type) {

      switch (type) {
        case 'General':
            return {background: '#ffe5d7', color: '#e7560a' };
        case 'Interview':
            return { background: '#ffe5d7', color: '#e7560a' };
        //more code

        case default:
            return {};
 
   }

return {};
}

  

EDIT: I've just read @Onur Baştürk had answerd before me.
He was right, you were duplicating the background attribute,
one in the HTML ([ngStyle]="{'background':...) and another in your ts code:

return {background: '#ffe5d7', color: '#e7560a' ....

Angular ng-style with a multiple conditional expression and multiple style attributes

You should add single quotes to 'border-color'

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none', 'border-color': ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid  ? 'red' : 'none'}"

---

Related Topics