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?

    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('style.width') artboardWidth;@HostBinding('style.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' }}}

    Solution 3
    From Gunter's answer here.

    You need to pass the same value you would add to an element like and sanitize the styles.

    Sample code provided by Gunter:

    @HostBinding('style')get myStyle(): String {return this.sanitizer.bypassSecurityTrustStyle('background: red; display: block;');}constructor(private sanitizer:DomSanitizer) {}
    • 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
    • Yes I have done so.– Bernoulli ITFeb 20 at 15:46
    • 1
      Marked as answer now... the final solution I chose is to bind to style (in general) based upon this: stackoverflow.com/a/46151691/468910– Bernoulli ITFeb 21 at 14:53

    Your Answer


    By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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