### File

`src/list/list.directive.ts`

### Description

Applies either ordered or unordered styling to the list container it is applied to.

See demo

For `ul`s it will apply unordered list styles, and for `ol`s it will apply ordered list styles.

If a `ul` or `ol` is nested within a `li` the directive will apply nested list styling.

../../iframe.html?id=list--basic

### Metadata

Selector | `[ibmList]`

### Index

###### HostBindings
class.bx--list--nested class.bx--list--ordered class.bx--list--unordered

### Constructor

`constructor(elementRef: ElementRef)`
Defined in src/list/list.directive.ts:30
Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No

### HostBindings

class.bx--list--nested
`class.bx--list--nested: ```
Defined in src/list/list.directive.ts:28

class.bx--list--ordered
`class.bx--list--ordered: ```
Defined in src/list/list.directive.ts:18

class.bx--list--unordered
`class.bx--list--unordered: ```
Defined in src/list/list.directive.ts:23

    import { Directive, ElementRef, HostBinding } from "@angular/core";

    /**
     * Applies either ordered or unordered styling to the list container it is applied to.
     *
     * [See demo](../../?path=/story/list--basic)
     *
     * For `ul`s it will apply unordered list styles, and for `ol`s it will apply ordered list styles.
     *
     * If a `ul` or `ol` is nested within a `li` the directive will apply nested list styling.
     *
     * <example-url>../../iframe.html?id=list--basic</example-url>
     */
    @Directive({
    	selector: "[ibmList]"
    })
    export class List {
    	@HostBinding("class.bx--list--ordered") get ordered() {
    		if (this.nested) { return false; }
    		return this.elementRef.nativeElement.tagName === "OL";
    	}

    	@HostBinding("class.bx--list--unordered") get unordered() {
    		if (this.nested) { return false; }
    		return this.elementRef.nativeElement.tagName === "UL";
    	}

    	@HostBinding("class.bx--list--nested") get nested() {
    		return this.elementRef.nativeElement.parentElement.tagName === "LI";
    	}

    	constructor(protected elementRef: ElementRef) {}
    }

# result-matching ""

# No results matching ""