Monday, September 25, 2017

using style. inline at a tag in Angular 4

Alright, first off let's talk about what this is not. This is not ngStyle (though you will represent styles with a hyphen normally of kebab-case in camelCase instead just the same), but instead this is the way to set a style while reaching back to a TypeScript method at a component from the component's template. At the template one might have:

<button type="button" [style.marginLeft]="getMargie()" (click)="act()">X</button>

 
 

...and then getMargie could look like:

getMargie():string{
   return "42px";
}

 
 

Obviously, there is little reason to have something so simple. You would have TypeScript side mechanics to calculate the string that this method returns or else there is no reason to do something like this whatsoever. Anyhow, what is above will work great, but no matter what you do, do NOT do something like this:

getMargie():string{
   return "42px;";
}

 
 

See the difference? The semicolon inside the string is bad, bad, bad.

No comments:

Post a Comment