Flex List Item - md-flex-list-item

A list item element that gives more freedom to its contents and works with existing Angular Materials 2.

It's height is content aware, and can be used with any existing md-list or md-nav-list by using the "md-flex-list-item" component or directive.

Note that by default, this is for nav list, where the only difference is the ripple effect. You can disable this by passing mdRippleDisabled to the component.

flex-list-component.ts

**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

 //^Based off the original list item

import {
    AfterContentInit,
    Component,
    ContentChildren,
    ElementRef,
    Input,
    Optional,
    QueryList,
    Renderer2,
    ViewEncapsulation
} from '@angular/core';
import localStyle from './flex-list-item.scss';
import {MdLine, MdLineSetter, coerceBooleanProperty, MdList, MdNavListCssMatStyler} from "@angular/material";
import template from './flex-list-item.html';

@Component({
    moduleId: module.id,
    selector: 'md-flex-list-item, mat-flex-list-item, a[md-flex-list-item], a[mat-flex-list-item]',
    host: {
        'role': 'listitem',
        'class': 'mat-list-item',
        '(focus)': '_handleFocus()',
        '(blur)': '_handleBlur()',
    },
    template: template,
    encapsulation: ViewEncapsulation.None,
    styles:[
    localStyle
    ]
})
export class MdFlexListItem implements AfterContentInit {
    private _disableRipple: boolean = false;
    private _isNavList: boolean = false;

    /**
     * Whether the ripple effect on click should be disabled. This applies only to list items that are
     * part of a nav list. The value of `disableRipple` on the `md-nav-list` overrides this flag.
     */
    @Input()
    get disableRipple() { return this._disableRipple; }
    set disableRipple(value: boolean) { this._disableRipple = coerceBooleanProperty(value); }

    @ContentChildren(MdLine) _lines: QueryList<MdLine>;

    constructor(private _renderer: Renderer2,
                private _element: ElementRef,
                @Optional() private _list: MdList,
                @Optional() navList: MdNavListCssMatStyler) {
        this._isNavList = !!navList;
    }

    ngAfterContentInit() {}

    /** Whether this list item should show a ripple effect when clicked.  */
    isRippleEnabled() {
        return !this.disableRipple && this._isNavList && !this._list.disableRipple;
    }

    _handleFocus() {
        this._renderer.addClass(this._element.nativeElement, 'mat-list-item-focus');
    }

    _handleBlur() {
        this._renderer.removeClass(this._element.nativeElement, 'mat-list-item-focus');
    }

    /** Retrieves the DOM element of the component host. */
    _getHostElement(): HTMLElement {
        return this._element.nativeElement;
    }
}

flex-list-item.html

<div class = "flex-list-item-content" flex layout="rows" layout-align="space-between center">
    <div class="mat-list-item-ripple" md-ripple
         [mdRippleTrigger]="_getHostElement()"
         [mdRippleDisabled]="!isRippleEnabled()">
    </div>
    <ng-content></ng-content>
</div>

flex-list-item.module.ts

import {NgModule} from "@angular/core";
import {MdLineModule, MdRippleModule, MdCommonModule} from '@angular/material';
import {MdFlexListItem} from "./flex-list-item-component";


@NgModule({
    imports:[
        MdLineModule, MdRippleModule, MdCommonModule
    ],
    declarations:[
        MdFlexListItem
    ],
    exports:[
        MdFlexListItem
    ]
})
export class FlexListItemModule{}

flex-list-item.scss

.flex-list-item-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
  position: relative;
  cursor: pointer;
  height: 100%;
  min-height: 48px; //Taken from base height of angular material rows
}