Linking Angular Template: Connect the height of one container to the height of another

Question

Linking Angular Template: Connect the height of one container to the height of another

My objective is to dynamically bind the height of an angular component to a div element. I am experimenting with using template reference to access the height.

Is there a way to achieve this in a clean manner? I would like to implement it similar to the code snippet below.

<div [style.height.px]="section1.offsetHeight"></div>
<app-custom-tag #section1>
</app-custom-tag>

The goal is for the height of <div> to match the height of <app-custom-tag>

Using CSS column layout is not an option in this case as these two elements are not positioned together.

javascript css angular

Answer 1

Answer №1

It seems like there are a few additional steps you need to take.

If you mention a particular part of the view, you will receive the corresponding class instance. By doing this, you can inject ElementRef to access information about the native element.

Take a look at this example:

foo.component.ts

@Component({
  selector: 'foo',
  template: `foo`,
  styles: [`:host { color: red; display: block; height: 300px; }`]
})
export class FooComp {

  get offsetHeight() {
    return this.el.nativeElement.offsetHeight;
  }

  constructor(private el: ElementRef) {}
}

app.component.ts

@Component({
  selector: 'my-app',
template: `
  <foo #f></foo>
  {{ f.offsetHeight }}

  <br>

  <div style="border: 1px solid black" [style.height.px]="f.offsetHeight"></div>
  
  <br>

  <input #i id="demo" type="text">

  {{ i.id }}
`,
})
export class AppComponent {}

When you mention a DOM element in the view, you will receive that specific DOM element.

Check out the ng-run demo here.

Answer 2

It seems like there are a few additional steps you need to take.

If you mention a particular part of the view, you will receive the corresponding class instance. By doing this, you can inject ElementRef to access information about the native element.

Take a look at this example:

foo.component.ts

@Component({
  selector: 'foo',
  template: `foo`,
  styles: [`:host { color: red; display: block; height: 300px; }`]
})
export class FooComp {

  get offsetHeight() {
    return this.el.nativeElement.offsetHeight;
  }

  constructor(private el: ElementRef) {}
}

app.component.ts

@Component({
  selector: 'my-app',
template: `
  <foo #f></foo>
  {{ f.offsetHeight }}

  <br>

  <div style="border: 1px solid black" [style.height.px]="f.offsetHeight"></div>
  
  <br>

  <input #i id="demo" type="text">

  {{ i.id }}
`,
})
export class AppComponent {}

When you mention a DOM element in the view, you will receive that specific DOM element.

Check out the ng-run demo here.

Linking Angular Template: Connect the height of one container to the height of another

Answer №1

foo.component.ts

app.component.ts

Similar questions

What is the process for changing text to red when hovering over it in a nested list?

AJAX response for form validation

Mastering JSON arrays in jQuery

Submitting a form in React/Javascript: A step-by-step guide

I'm looking for recommendations on where to begin learning about JavaScript touch events for web development. Any suggestions?

Delivering compressed files in a React server

Angular retrieves elements between indexes following ordering

The onClick event's detail property is persisting even after the React component has been replaced

What is the proper way to utilize this jQuery function?

JavaScript is throwing an error when clicking on functions and managing the z-index property

Method for transferring all items to a new array in AngularJs

Programmatically simulating a click on a link within a Windows Universal Windows Platform (U

Develop a circular carousel using React JS from scratch, without relying on any third-party library

Attempting to render an image onto a canvas and apply Caman.js for image editing purposes

After passing through JavaScript, my link becomes scrambled

Adjust the form input box height to a different size

Utilize a random file import with the help of React JS, Babel, and ES6

Should I use Object.assign or define class properties?

What causes the difference in behavior of 'flex-grow' between Chrome and Firefox/Edge?

The rating script fails to update when multiple ratings are applied simultaneously