CODEWITHSUNDEEP
cssangular
Passionate Coder
Passionate Coder

Reputation: 7294

Child component height and width is not applying in angular

I am not able to apply height/width to a child component in angular. Please have a look and let me know where and what I am doing wrong

app.component.html

<app-child [width]="10" [height]="10"></app-child>

.child.ts

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

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  constructor(private renderer: Renderer2, private elRef: ElementRef) { }

  @Input() width
  @Input() height

  ngAfterViewInit() {
    this.renderer.setStyle(this.elRef.nativeElement, 'height', this.height + "%");
    this.renderer.setStyle(this.elRef.nativeElement, 'width', this.width + "%");
  }
}

.child.html

<div class="wrapper" [style.width.%]="width" [style.height.%]="height">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Issues :

app-child component still takes full width and hight it should be 10% div inside app-child taking correct width but height is still 100%

Example link

https://stackblitz.com/edit/angular-qgobau

Upvotes: 0

Views: 3132

Answers (2)

Rajat
Rajat

Reputation: 692

Your issue is with CSS. Your component is taking correct values (10%) but you also need to set height on the parent elements (maybe body or html). You could set a fixed height on html, something like:

html {
height: 500px;
}

Upvotes: 1

Vignesh
Vignesh

Reputation: 91

This link will help to you : Height percentage not working in CSS

you need to add below code in your child component css

html, body {
   height: 100%;
}

Upvotes: 1

Related Questions