Problem: how to apply rendered property of a div into another div
Sometimes we want to use the rendered property of an HTML element such as height, width, etc.. to set the property in another HTML element.
Solution: use ngAfterViewChecked lifecycle
This can be easily done in Angular using lifecycle hook ngAfterViewChecked
.
Here is the proper solution:
demo.component.html
<div #div1 class="div1"><p>Div1</p></div><div #div2 class="div2"><p>Div2</p></div>
demo.component.css
.div1 {background-color: lightblue;height: 100px;}@media screen and (max-width: 767px) {.div1 {height: 500px;}}.div2 {background-color: lightgreen;}
demo.component.ts
import {Component,OnInit,ViewChild,Renderer2,AfterViewChecked,HostListener,} from "@angular/core"@Component({selector: "app-demo",templateUrl: "./demo.component.html",styleUrls: ["./demo.component.css"],})export class DemoComponent implements OnInit, AfterViewChecked {@ViewChild("div1") div1@ViewChild("div2") div2constructor(private renderer: Renderer2) {}ngOnInit() {}@HostListener("window:resize", [])onResize() {this.setDivHeight()}ngAfterViewChecked() {this.setDivHeight()}setDivHeight() {let height = `${this.div1.nativeElement.offsetHeight}px`this.renderer.setStyle(this.div2.nativeElement, "height", height)}}
Working Example
https://stackblitz.com/edit/set-rendered-height-of-div-to-another-div
I hope that you like the article.
Keep coding and keep learning and keep building stuffs...