Angular 5 binding attribute from @Input

Question

(EDITED) I had a simple jarallax with just a div with the correspondent configuration in a component:

<div class="view cover-jarallax" data-jarallax="{"speed": '0.w'}" 
style="background-image: url(imgurl);' +
'height: ' + this.height + ';"></div>

I need to use it one or two more times, and so I'm trying to make it dynamic, receiving the speed, url and height as an @Input from the parent component.

The thing is that I'm having some issues doing that, due to using a dynamic binding directly to the div's attributes. I mean:

<div class="view cover-jarallax" [data-speed]="datajarallax" 
[ngStyle]="style"></div>

And in the component:

import {Component, Input, OnInit} from '@angular/core';

@Component({
selector: 'app-middle-parallax',
templateUrl: './middle-parallax.component.html',
styleUrls: ['./middle-parallax.component.scss']
})
export class MiddleParallaxComponent implements OnInit {

@Input() speed: number;
@Input() imgURL: string; // time to wait after finish typing to start 
deleting the current string
@Input() height: string;
style = '';
datajarallax = '';

constructor() { }

ngOnInit() {

this.style = 'background-image: url(\'' + this.imgURL + '\');' +
  'height: ' + this.height + '; ' +
  'background-repeat: no-repeat; ' +
  'background-size: cover; ' +
  'background-position: center center;';
this.datajarallax = '{"speed": ' + this.speed + '}';
}

}

That's not working, I supose that is because of that I just said, but It doesn't come to me the way to go. Any help?

EDIT: The console shows this error:

ERROR Error: Cannot find a differ supporting object 'background-image: 
url('https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=
rb-0.3.5&s=db802b72adc82f97904d37dde9d0d401&dpr=1&auto=format&fit=crop&w=1000&q
=80&cs=tinysrgb');height: 400px; background-repeat: no-repeat; 
background-size: cover; background-position: center center;'

SOLUTION (STYLES):

I had to pass the style string as an object to ngStyle:

this.style = {'background-image': 'url(\'' + this.imgURL + '\')' ,
'height': this.height,
'background-repeat': 'no-repeat',
'background-size': 'cover',
'background-position': 'center center'};

EDIT2: Now styles are binding but data-jarallax doesn't, neither as object or as string

<div class="view cover-jarallax" [data-jarallax]="datajarallax" 
[ngStyle]="style"></div>

.

this.datajarallax = {'speed': 0.2};
this.datajarallax = '{\'speed\': 0.2}';

Try data-jarallax="{{datajarallax}}" and set datajarallax to {"speed": this.height} — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Jun 20, 2018 at 15:05

Sachila Ranawaka · Accepted Answer · 2018-06-20 15:06:44Z

1

Almost there. u just miss the "". also use the ngStyle

<div class="view cover-jarallax" data-jarallax="{{datajarallax}}" [ngStyle]= 
"style"></div>

datajarallax should be an object

datajarallax = {"speed": ' + this.height + '};

answered Jun 20, 2018 at 15:06

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Otloal Over a year ago

Sorry mate, that didn't work, I think I also tried it before.

Otloal Over a year ago

ERROR Error: Cannot find a differ supporting object 'background-image: url('undefined');height: undefined; background-repeat: no-repeat; background-size: cover; background-position: center center;'

Otloal Over a year ago

PS: I just put a console log of the bindings in the OnInit and it worked

Sachila Ranawaka Over a year ago

of course. you need to put it inside the oninit since you are accessing the input value. because oninit is a life cycle hook so it wait until the input value bound

Otloal Over a year ago

I just edited the question with more data, I still not find the problem

|

Collectives™ on Stack Overflow

Angular 5 binding attribute from @Input

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related