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 {}
}
}
Try this approach
[ngStyle]="isTrue ? {width: '50px', height: '20px'} : {}"
Or
[ngStyle]="{
width: '50px',
height: '20px'
}"