Style binding in angular 2

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss Style binding in Angular with examples.

Setting inline styles with style binding is very similar to setting CSS classes with class binding. Please wtach Class binding video from Angular 2 tutorial before proceeding with this video.

Notice in the example below, we have set the font color of the button using the style attribute.

@Component({
selector: 'my-app',
template: `
[button style="color:red"]My Button[/button]
`
})
export class AppComponent {
}

The following example sets a single style (font-weight). If the property 'isBold' is true, then font-weight style is set to bold else normal.

@Component({
selector: 'my-app',
template: `
[button style='color:red'
[/button]
`
})
export class AppComponent {
isBold: boolean = true;
}

style property name can be written in either dash-case or camelCase. For example, font-weight style can also be written using camel case - fontWeight.

Some styles like font-size have a unit extension. To set font-size in pixels use the following syntax. This example sets font-size to 30 pixels.

@Component({
selector: 'my-app',
template: `
[button style='color:red'
[/button]
`
})
export class AppComponent {
fontSize: number = 30;
}

To set multiple inline styles use NgStyle directive
1. Notice the color style is added using the style attribute
2. ngStyle is binded to addStyles() method of the AppComponent class
3. addStyles() method returns an object with 2 key/value pairs. The key is a style name, and the value is a value for the respective style property or an expression that returns the style value.
4. let is a new type of variable declaration in JavaScript.
5. let is similar to var in some respects but allows us to avoid some of the common “gotchas” that we run into when using var.
6. The differences between let and var are beyond the scope of this video. For our example, var also works fine.
7. As TypeScript is a superset of JavaScript, it supports let

@Component({
selector: 'my-app',
template: ` [button style='color:red' [ngStyle]="addStyles()"]My Button[/button]
`
})
export class AppComponent {
isBold: boolean = true;
fontSize: number = 30;
isItalic: boolean = true;

addStyles() {
let styles = {
};

return styles;
}
}

[Gamerthatpokemon]

Awesome !!! You are great man and many thanks for your contribution to the community. For my juniors i am always recommending your videos and we are eating food because of your contribution.

[amypham]

It's such a blessing to have your videos to watch. I watch one or two videos each day to become a better developer.

[kajalbhalla]

Venkat sir Thanks alot your videos are like blessing to me. I have a request plz make videos on data structures. It will be really helpful for non CS students like me.

[sunilsunil]

Please make a series on micro services. End to end we love to hear from you .

[vishaljaiswal]

Venket sir i am following you from 2014 ..you are really a great teacher your video is really helpful for us ....
sir please make video on crud with angular 2 in mvc

[alritedave]

Thank you sir. True legend among web devs

[CodAffection]

can we enable build watch in visual studio to avoid repeated reloading of the page ?

[inevitable.m]

the styles applied when hover through class are not replacing the ngstyles

these are ng styels
export class cssStyles{
border:number=2;
borderstyle:string='solid';
bordercolor:string='red';
margin:boolean=true;
width:number=50;
color:string='red';
hoover:string='div';
// class style


applystyles(){
let applyst={
'border.px' :this.border,
'border-style':this.borderstyle,
'margin':this.margin?'auto':'normal',
'width.%':this.width,
'color':this.color,

}
return applyst;
}
these are class styles
.div:hover{
letter-spacing: 5px;
color:white;
background-color: grey;
border: 5px solid green;

}
the common styles which are in ngstyles are not replced by class styles nay i know reason

[kingsanu]

you made happyness for billions of people. and we need to see who you are? can i get your personal iformation. like i curious to know about your self. your image, where are you from and many more like are you from india? and yes pic i really want to see of yours. by you i told that i got job in microsoft with 100x hike.

[rajtilak]

I like the way you say "tutorial"

[sunilkumar-zfdx]

hi,
Can you please provide videos on ElementRef, renderer and viewchild with debugging in chrome.

[shaileshbhat]

Sir, How to do Angular 2 project in ASP.NET core web application(.NET Framework)

[vaishnavikhapekar]

getting error >> Can't bind to 'ngstyle' since it isn't a known property of 'button'. Plz help..

[saadebad]

Sir, How to do Angular 2 project in ASP.NET core web application(.NET Framework)