Sharing Top Content from the Angular-sphere.

Responsive Equal Height with Angular Directive ― Scotch

Responsive Equal Height with Angular Directive

☞ 

#Angular

  • // { Component } from selector: ‘page-same-height’, – template: ` – main class=”container” – h2Malaysia States/h2 – – div class=”row” – div class=”col-sm-4″ *ngFor=”let state of list” – div class=”card card-block” – h4 class=”card-title”{{ state.title }}/h4 – p class=”card-text” – {{ state.content }} – /p – /div – /div -…
  • In our example, we want to match the height of all elements with class name card on the same row.
  • // { – Directive, ElementRef, AfterViewChecked, – Input, HostListener – } from selector: ‘[myMatchHeight]’ – }) – export class MatchHeightDirective implements AfterViewChecked { – // class name to match height – @Input() – myMatchHeight: string; – – constructor(private el: ElementRef) { – } – – ngAfterViewChecked() { – // call…
  • parent) return; – – // step 1: find all the child elements with the selected class name – const children = if (!
  • // matchHeight(parent: HTMLElement, className: string) { – // step 1: find all the child elements with the selected class name – const children = if (!

Let’s look at a very common use case. You has a list of items, you need to display all nicely on screen in card form.

It looks okay but you want all cards to always maintain same height. It should always match the height of the tallest object, and resize accordingly when screen size changed, like this:-

We can achieve this with by using creating a custom directive.

Interesting? Let’s code.

Main Component

Let’s look at our main component.

// { Component } from selector: ‘page-same-height’,

template: `

main class=”container”

h2Malaysia States/h2

div class=”row”

div class=”col-sm-4″ *ngFor=”let state of list”

div class=”card card-block”

h4 class=”card-title”{{ state.title }}/h4

p class=”card-text”

{{ state.content }}

/p

/div

/div

/div

/main

`

})

export class PageSameHeightComponent {

list = [

{

title: ‘Selangor’,

content: ‘Selangor is a state ….’

},

{

title: ‘Kuala Lumpur’,

content: ‘Kuala Lumpur is the capital of Malaysia…’

Responsive Equal Height with Angular Directive ― Scotch