NG STYLE
What is NgStyle in angular?
Angular NgStyle is today's topic. An attribute directive that updates styles
for the containing HTML element. Sets one or more style properties,
specified as colon-separated key-value pairs. The NgStyle directive lets
you set a given DOM element's style properties.
What is ngClass?
ngClass is a very powerful built-in Angular directive for dynamically changing CSS classes on
HTML elements. It does this by allowing us to bind scope values as class names. ... With these, you
can bend ng-class to style just about anything in Angular.
What is the difference between ng class and Ng style?
ng-style is used to interpolate javascript object into style attribute, not css class. And ng-class
directive translates your object into class attribute
The NgStyle directive lets you set a given DOM elements style properties.
<div [ngStyle]="{'background-color':'green'}"></<div>
This sets the background color of the div to green.
ngStyle becomes much more useful when the value is dynamic. The values in the object literal that
we assign to ngStyle can be javascript expressions which are evaluated and the result of that
expression is used as the value of the css property.
Exmple
HTML FILE:
<ul *ngFor="let person of people">
<li [ngStyle]="{'color':getColor([Link])}"> {{ [Link] }}
({{ [Link] }}) (1)
</li>
</ul>
TS FILE:
getColor(country) { (2)
switch (country) {
case 'UK':
return 'green';
case 'USA':
return 'blue';
case 'HK':
return 'red';
}
}
people: any[] = [
{
"name": "Douglas Pace",
"country": 'UK'
},
{
"name": "Mcleod Mueller",
"country": 'USA'
},
{
"name": "Day Meyers",
"country": 'HK'
},
{
"name": "Aguirre Ellis",
"country": 'UK'
},
{
"name": "Cook Tyson",
"country": 'USA'
}
];
CHANGE THE FONT SIZE
[ngStyle]="{'[Link]':24}"
The .px suffix says that we are setting the font-size in pixels. You could .em to express the font size
in ems or even in percentage using .%
[[Link]]="24"
HTML FILE
<ul [ngStyle]="{'[Link]':24}" *ngFor="let person of people">
<li [ngStyle]="{'color':getColor([Link])}"> {{ [Link] }} ({{ [Link] }}) (1)
</li>
</ul>
BORDER
HTML FILE
<div [ngStyle]="{'border':'5px solid blue'}"> sem - 3 BCA </div>
MULTIPALE STYLE IN SAME TAG
<ul *ngFor="let person of people">
<li [ngStyle]="{'font-size':'24px','color':getColor([Link]),'border':'5px
solid blue','background-color':'green'}">{{ [Link] }} ({{ [Link]
}})
</li>
</ul>
NG CLASS
NG CLASS USING STRING
CSS FILE
.one {
color: green;
}
.two {
font-size: 20px;
}
HTML FILE
<p [ngClass]="'one two'">
Using NgClass with String.
</p>
NG CLASS
NG CLASS USING ARRAY
CSS FILE
.three {
color: red;
}
.four {
font-size: 15px;
}
HTML FILE
<p [ngClass]="['three', 'four']">
Using NgClass with Array.
</p>
NG CLASS WITH OBJECT
Here we will discuss NgClass with object using braces { }. It will be in key and value pair format
separated by colon (:).
key: CSS class name.
value: An expression that returns Boolean value.
Here key will be CSS class name and value will be an expression that will return Boolean value.
CSS will be added at run time in HTML element only when if expression will return true. If
expression returns false then the respective CSS class will not be added. Suppose we have four CSS
classes named as .one, .two, .three and .four.
HTML FILE
<p [ngClass]="{'one': true, 'three': false }">
Using NgClass with Object.
</p>
NG CLASS WITH COMPONENT METHOD
Here we will use a component method with NgClass. We will create a component method that will
return a set of CSS classes. We can dynamically add or remove CSS classes from our set within the
method. Find the component method used in our example.
TS FILE
getCSSClasses(flag:string)
{
let cssClasses;
if(flag == 'nightMode')
{
cssClasses = {
'one': true,
'two': true
}
}
else
{
cssClasses = {
'two': true,
'four': false
}
}
return cssClasses;
}
HTML FILE
<div [ngClass]="getCSSClasses('nightMode')">
Using NgClass with Component Method.
</div>
