Passing values from parent component to child component in angular

Question

I am trying to build an angular component which displays an image based on the src, width and height provided by the parent element.

This is my code:

my-image-logo.component.html

<img #imgDiv src="{{name}}" >

my-image-logo.component.ts

export class MyImageLogoComponent implements OnInit {

    @Input() name;
    @Input() width = "100px";
    @Input() height = "100px";
    @ViewChild("imgDiv") imgDiv: ElementRef;
    constructor() { }

    ngOnInit() {
        this.imgDiv.nativeElement.setAttribute("width", this.width);
        this.imgDiv.nativeElement.setAttribute("height", this.height);
    }
}

parent-component.html

<app-my-image-logo [name]="userDetails.profilePic" [width]="'50px;'" [height]="'50px;'"></app-my-image-logo>

This works perfectly, but I was trying to not initialize the width and height in ngOnInit, instead use ngStyle as follows:

<img [ngStyle]="{'width': width, 'height': height}" src="{{name}}" >

But this is not working. I even tried the following, but even that doesn't work:

 <img width="{{width}}" height="{{height}}" src="{{name}}" >

What am I doing wrong? Also, is this the right way to assign css styles for the components?

Your code should work with <app-my-image-logo [width]="'50px'" [height]="'50px'" ...> (without the ;). See this stackblitz. — Martin Parenteau
– Martin Parenteau, Commented Nov 9, 2018 at 12:46
Thanks, but I tried that, it is not working. On inspect I see that I get width="0" height="0" — helloworld
– helloworld, Commented Nov 9, 2018 at 12:48
Did you see the stackblitz? It is your original code (as shown in my previous comment), and it works. — Martin Parenteau
– Martin Parenteau, Commented Nov 9, 2018 at 12:49
@ConnorsFan Thanks, yes it is working, I was trying with [width]="width" [height]="height". — helloworld
– helloworld, Commented Nov 9, 2018 at 12:52

Dyd666 · Accepted Answer · 2018-11-09 12:44:55Z

1

You can modify attributes by doing this (in your child component):

<img [attr.width]="width" [attr.height]="height">

answered Nov 9, 2018 at 12:44

Dyd666

7351 gold badge11 silver badges30 bronze badges

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

Comments

Julien · Accepted Answer · 2018-11-09 12:39:54Z

0

Your can share the parent's css file with a child with :

@Component({
    selector: 'lions',
    templateUrl: 'lions.component.html',
    styleUrls: ['lions.component.css', '../zoo.component.css']
})

(zoo is the parent, lion the child)

But in your case I would just set the child width and height to 100%, for exemple in lion.css :

:host() { width: 100%; height: 100% }

( :host() means the root tag of your component )

answered Nov 9, 2018 at 12:39

Julien

2,7662 gold badges35 silver badges47 bronze badges

Comments

Abhishek Ekaanth · Accepted Answer · 2018-11-09 12:42:38Z

0

In your child component, you will have to change the HTML to

 <img [width]="width" [height]="height" [src]="name" >

answered Nov 9, 2018 at 12:42

Abhishek Ekaanth

2,5872 gold badges24 silver badges41 bronze badges

1 Comment

helloworld Over a year ago

Thanks, but it doesn't work. On inspect I see that I get width="0" height="0"

Kugesh Rajasekaran · Accepted Answer · 2023-01-01 07:49:14Z

0

imgDiv might be undefined when we try to access in ngOnInit. Try to do that inside ngAfterViewInit, but I am not sure whether we can change the width because the view already got drawn

answered Jan 1, 2023 at 7:49

Kugesh Rajasekaran

3361 gold badge4 silver badges10 bronze badges

Collectives™ on Stack Overflow

Passing values from parent component to child component in angular

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related