Angular 2: Input variable in Component does not update once called

Question

Hello people of StackOverflow!

I am having some trouble with my code. As you can see, I want to be able to call a row with a set width (bootstrap format), as I don't want to type the class every time.

So I thought of a way which is the following:

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

@Component({
    moduleId: module.id,
    selector: 'content',
    template: ` <div class="row">
                    <div [ngClass]="contentClass" 
                         id="content" 
                         [ngStyle]="{ 'color': 'black', 'font-size': '20px' }">
                    <ng-content></ng-content>
                    </div>
                </div>`,
    styleUrls: ['content.stylesheet.css']
})

export class ContentComponent {
    @Input() rowWidth = "12";
    contentClass=(("col-lg-" + this.rowWidth)+(" col-sm-" + this.rowWidth)+(" col-xs-" + this.rowWidth));
}

But once I call the component from another component, it's not working the way I want.

<banner bannerHeight="300px"></banner>   <!-- This works -->
<content rowWidth="6"></content>         <!-- This doesn't -->

If I used for example

<content [ngStyle]="{'color': 'black'}"></content>

the operation succeeds. The directives and imports are set correctly in the parent component.

So here is my question: How do I make it work the way I want it to?

malifa · Accepted Answer · 2016-06-24 20:22:25Z

4

It doesn't work (the way you want, i assume you mean that your contentClass has a rowWidth of 12) because your assignment to contentClass is made before the template is actually initialized.

You have to implement OnInit and use ngOnInit to set the contentClass with the assignment to your rowWidth input:

export class ContentComponent implements OnInit{
    @Input() rowWidth = 12;
    contentClass:string;

    ngOnInit():any {
        this.contentClass = (("col-lg-" + this.rowWidth)+(" col-sm-" + this.rowWidth)+(" col-xs-" + this.rowWidth));
    }
}

With <content [rowWidth]="6"></content> your element will then have col-lg-6 col-sm-6 col-xs-6 instead of 12 set as its css classes.

answered Jun 24, 2016 at 20:22

malifa

8,1552 gold badges44 silver badges57 bronze badges

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

2 Comments

Wouter Over a year ago

That did the trick! I totally forgot about the lifecycle hooks.. rookie mistake. So as this did the trick for the contentClass, would it be best practice to implement such a thing for every input variable or only when there is processing time spent on it (for example a calculation or concatenation)?

malifa Over a year ago

Well, if you want to use your input at time of initialization, then yes (which you want most of the time) you need a lifecycle hook.

Collectives™ on Stack Overflow

Angular 2: Input variable in Component does not update once called

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related