I am trying to set the width and height of a component alongside its initial declaration in a parent component's html. Having the following component tag (in the parent's html):

<app-ipe-artboard [artboard]="artboard" [ngStyle]="setStyle()"></app-ipe-artboard>

Where setStyle() is a method on the artboard component (itself):

@Component({selector: 'app-ipe-artboard'})export class ArtboardComponent implements OnInit {@Input() public artboard: Artboard;ngOnInit() {}setStyle(): object {return {width: this.artboard.width + 'px',height: this.artboard.height + 'px'};}}

Is it possible to reach this method (not in the way I have put it now because it gives compile time error and undesired runtime behavior consecutively)? Or is the component not yet instantiated when it is rendered at this this place and does this need to be done somehow different?

share|improve this question

    The issue is that right now the parent component is looking for it's own setStyle method and not finding any, so it throws a runtime error. The methods on the app-ipe-artboard are scoped to that component and cannot be reached by the parent (unless you pass a reference to that component to your parent component, which doesn't do much to clean this up).

    Solution 1

    Assuming the behavior you are looking for is to set the width and height of the child component based on variables on the artboard, you can accomplish this with @HostBinding.

    @Component({selector: 'app-ipe-artboard'})export class ArtboardComponent implements OnInit {@Input() public artboard: Artboard;@HostBinding('width') artboardWidth;@HostBinding('height') artboardHeight;ngOnInit() {this.artboardWidth=artboard.width;this.artboardHeight=artboard.height;}}

    Solution 2

    Another way you can do this, since you have the artboard in the parent, is just move that setStyle method to the parent component.

    parent component

    @Component({template: `<app-ipe-artboard [artboard]="artboard" [ngStyle]="setStyle()"></app-ipe-artboard>`})export class ParentComponent {artboard: Artboard={width: 500, height: 300};setStyle() {return { width: this.artboard.width + 'px', height: this.artboard.height + 'px' }}}
    share|improve this answer
    • Thanks for providing two ways of doing this. I tend to prefer the first one to keep it the component's responsibility itself. Does this approach also keep an active databinding between artboardWidth & artboard.width as in: when the component is resized by a user it is reflected in the accompanying business object? That would then be most beneficial.– Bernoulli ITFeb 14 at 9:48
    • Actually when imlementing it gave this error: [Angular] Can't bind to 'width' since it isn't a known property of 'app-ipe-artboard'. 1. If 'app-ipe-artboard' is an Angular component and it has 'width' input, then verify that it is part of this module. 2. If 'app-ipe-artboard' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.– Bernoulli ITFeb 14 at 10:14
    • Have you declared the AppIpeArtboardComponent (or whatever the class name is for that component) in your module?– vincecampanaleFeb 14 at 14:32

    Your Answer

     
    discard

    By posting your answer, you agree to the privacy policy and terms of service.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.