typescript - Angular 2 : How to set-up a @Input for an inline style? -


i have component needs display random values, randomly generated , pushed in trough @input bindings troughout template. far good, can't seem link @input style image url so:

<a routerlink="{{nextlink}}" routerlinkactive="active" class="nav-link next" style="background: url('assets/images/{{nextbg}}');">

where {{nextbg}} file extension e.g. next.jpg => this aiming for.

i tried using [ngstyle] , [style.background-image] without luck.

here code:

import { component, input } '@angular/core';  @component({     moduleid: module.id,     selector: 'prev-next',     template: `     <nav class="prev-next-nav">         <a routerlink="{{prevlink}}" routerlinkactive="active" class="nav-link prev" style="background: url('assets/images/tesla.jpg');">             <span class="link-dir">previous project</span>             <span class="link-title"><i class="icon icon-arrowright"></i>&nbsp;{{prevname}}</span>         </a>         <a routerlink="{{nextlink}}" routerlinkactive="active" class="nav-link next" style="background: url('assets/images/food.jpg');">             <span class="link-dir">next project</span>             <span class="link-title">{{nextname}}&nbsp;<i class="icon icon-arrowright"></i></span>         </a>     </nav> ` })  export class prevnextcomponent {     // previous link inputs     @input() prevbg: string;     @input() prevname: string;     @input() prevlink: string;      // next link inputs     @input() nextbg: string;     @input() nextname: string;     @input() nextlink: string; }

try following using [ngstyle]:

<a routerlink="{{prevlink}}" routerlinkactive="active" class="nav-link prev" [ngstyle]="{'background-image': 'url(assets/images/' + prevbg + ')'}">     <span class="link-dir">previous project</span>     <span class="link-title"><i class="icon icon-arrowright"></i>&nbsp;{{prevname}}</span> </a>

or perhaps utilize oninit lifecycle hook build out urls within component reference @input() prevbg: string;.

html

<a routerlink="{{prevlink}}" routerlinkactive="active" class="nav-link prev" [ngstyle]="{'background-image': prevbgurl}">     <span class="link-dir">previous project</span>     <span class="link-title"><i class="icon icon-arrowright"></i>&nbsp;{{prevname}}</span> </a>

ts

ngoninit() {     this.nextbgurl = `url(assets/images/${this.nextbg})`; }

i've created plunker. if click on 1 of hero's you'll see placehold.it image being loaded in div.foo. should load local asset url in same say.

hopefully helps!


Comments

Post a Comment

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

this addentry blog page have made scratch , there underlying problems code particularly clear button supposed clear text entered when button clicked on doesn't work have saved html file problem. also 1 other problem submit button works doesn't pass of text index file have written php , reason whenever click on submit button redirects me index page without posting entry have made. <!doctype html> <html> <head> <script> function message() { alert("clear form?"); } </script> <style> body {background-color: beige;} h1 {color: black;} p {color: black;} textarea { width: 50%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: white; font-size: 16px; resize: none; } div { padding-left: 20px; } </style> </head> <meta charset="utf-8"> <link rel="stylesheet" href="....
Read more

python - Error: Unresolved reference 'selenium' What is the reason? -

# -*- coding: utf-8 -*- selenium import selenium import unittest, time, re class rc(unittest.testcase): def setup(self): self.verificationerrors = [] self.selenium = selenium("localhost", 4444, "*chrome", "http://stackoverflow.com/") self.selenium.start() def test_rc(self): sel = self.selenium sel.open("/") sel.type("id=kw", "selenium") sel.click("id=container") sel.click("id=su") def teardown(self): self.selenium.stop() self.assertequal([], self.verificationerrors) if __name__ == "__main__": unittest.main() this recorded selenium ide, selenium remote control code. in ide test passed.   in pycharm open, first line ( from selenium import selenium ) there error: unresolved reference 'selenium' what reason? my environment is python3.5 selenium3.3.1 selenium-server-standalone-...
Read more

php - Need to store a large amount of data in session with CI 3 but on storing large data in session it is itself destorying automatically -

i working on large web application need database retrieved session instead of database. first time retrieving db , saving session onward calls of data going session. it handling data @ stage when got more data stored in session session got destroyed automatically... "this problem seems similar question says title session destroyed after redirect other pages of site." i got answer questions point here how handle thing when know in future have more data stored inside session, i wanted know little bit more involved answer right in development stage on production when have user 100000 or more how session behave, application behave in same manner did before. kindly discuss me, researching, need corporation more technical in php discussion may solution many of people facing same kind of issues.. you need use native php session because php session stores id in cookie. codeigniter stores data in cookie , problem stuck. so either need use native php sessions...
Read more