adjust example

juristr · Jun 2, 2017 · 4d67a46 · 4d67a46
1 parent a75ec0f
commit 4d67a46
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/_posts/2016-01-25-learning-ng2-dynamic-styles.md b/_posts/2016-01-25-learning-ng2-dynamic-styles.md
@@ -79,16 +79,17 @@ Assume for instance we want to dynamically add a background image of a user's pr
 @Component({
   selector: 'my-app',
   template: `
-    <div [style.background-image]="getProfilePicStyle()">
+    <div [style]="getStyle()">
     </div>
   `
 })
 export class App {
 
-  getProfilePicStyle() {
+  getStyle() {
     // snip snip -> fetch the url from somewhere
     const profilePicUrl = 'some-remote-server-url.jpg';
-    return `url(${profilePicUrl}`;
+    const style = `background-image: url(${profilePicUrl})`;
+    return style;
   }
 
 }
@@ -108,12 +109,13 @@ export class App {
 
   constructor(private sanitizer: DomSanitizer) {}
 
-  getProfilePicStyle() {
+  getStyle() {
     // snip snip -> fetch the url from somewhere
     const profilePicUrl = 'some-remote-server-url.jpg';
+    const style = `background-image: url(${profilePicUrl})`;
 
     // sanitize the style expression
-    return this.sanitizer.bypassSecurityTrustStyle(`url(${profilePicUrl}`);
+    return this.sanitizer.bypassSecurityTrustStyle(style);
   }
 
 }