I am currently working on a component that needs to display random values, which will be generated randomly and passed through some @Input bindings in the template. Everything seems to be going well, but I am facing an issue when trying to link an @Input to a style image URL like this:
<a routerLink="{{nextLink}}" routerLinkActive="active" class="nav-link next" style="background: url('assets/images/{{nextBg}}');">Here, {{nextBg}} represents a file with its extension e.g. next.jpg => this is my desired outcome.
I have attempted using [ngStyle] and [style.background-image] without success.
Below is my code snippet:
import { Component, Input } from '@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> {{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}} <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;
}