Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare bibendum magna at consequat. Morbi ultrices, augue eget condimentum commodo, lacus odio sodales odio, non suscipit libero enim nec odio.
Sed lorem elit, bibendum sed varius in, pretium vitae ipsum.
Curabitur vulputate mi risus, vitae pulvinar est egestas quis. Phasellus porta lacus eget velit condimentum, ac iaculis lacus volutpat.
Donec quam felis, vulputate non egestas facilisis, sagittis ac odio. Aliquam tincidunt, enim commodo congue volutpat, libero erat tempus massa, eu vehicula risus eros in metus. Etiam convallis, neque quis pellentesque sodales, metus leo gravida magna, dictum ullamcorper metus lectus eget erat. Vestibulum in leo a urna lacinia dapibus a at lacus.
```
The `equalizer` directive is the parent and aims to "listen" the `equalize` children directives.
This way of using the library will automatically update the height of the elements event if the window is resized.
### Using the service
A service is provided to equalize an array of `ElementRef`:
```typescript
import { ngAfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { EqualizerService } from '../../projects/ngx-equalizer/src/lib/equalizer.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements ngAfterViewInit {
@ViewChild('paragraph1', {read: ElementRef})
paragraph1: ElementRef;
@ViewChild('paragraph2', {read: ElementRef})
paragraph2: ElementRef;
@ViewChild('paragraph3', {read: ElementRef})
paragraph3: ElementRef;
constructor(
private readonly equalizerService: EqualizerService
) {
}
ngAfterViewInit(): void {
this.equalizerService.equalizeElements([
this.paragraph1,
this.paragraph2,
this.paragraph3,
]);
}
}
```
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare bibendum magna at consequat. Morbi ultrices, augue eget condimentum commodo, lacus odio sodales odio, non suscipit libero enim nec odio.
Sed lorem elit, bibendum sed varius in, pretium vitae ipsum.
Curabitur vulputate mi risus, vitae pulvinar est egestas quis. Phasellus porta lacus eget velit condimentum, ac iaculis lacus volutpat.
Donec quam felis, vulputate non egestas facilisis, sagittis ac odio. Aliquam tincidunt, enim commodo congue volutpat, libero erat tempus massa, eu vehicula risus eros in metus. Etiam convallis, neque quis pellentesque sodales, metus leo gravida magna, dictum ullamcorper metus lectus eget erat. Vestibulum in leo a urna lacinia dapibus a at lacus.
```
This way of using the library will not update the height of the elements event if the window is resized. You have to handle by adding for example:
```typescript
@HostListener('window:resize')
private onWindowResize() {
this.equalizerService.equalizeElements([
this.paragraph1,
this.paragraph2,
this.paragraph3,
]);
}
```
## License
The project is under MIT License.
---
_Source: https://npm.io/package/ngx-equalizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._