### File

`src/structured-list/list-header.component.ts`

### Description

`ListHeader` provides a container for the `ListColumn`s that make up the header of a structured list.

Example:

     *     <ibm-list-header>
     *        <ibm-list-column nowrap="true">Column 1</ibm-list-column>
     *        <ibm-list-column nowrap="true">Column 2</ibm-list-column>
     *        <ibm-list-column>Column 3</ibm-list-column>
     *    </ibm-list-header>
     *

### Implements

`AfterContentInit`

### Metadata

selector | `ibm-list-header`

template

    <div class="bx--structured-list-row bx--structured-list-row--header-row">
    	<ng-content></ng-content>
    	<div *ngIf="selection" class="bx--structured-list-th"></div>
    </div>

### Index

###### Properties

- Protected _skeleton
- columns
- selection

###### Methods

- ngAfterContentInit
- Protected updateChildren

###### Inputs

- skeleton

###### HostBindings

- class.bx--structured-list-thead

###### Accessors

- skeleton

### Inputs

`skeleton` | Type : `any`
Defined in src/structured-list/list-header.component.ts:36

### HostBindings

class.bx--structured-list-thead
`class.bx--structured-list-thead: ```
Default value : `true`
Defined in src/structured-list/list-header.component.ts:33

### Methods

ngAfterContentInit
`ngAfterContentInit()`
Defined in src/structured-list/list-header.component.ts:54
Returns : `void`

Protected updateChildren
`updateChildren()`
Defined in src/structured-list/list-header.component.ts:62
Returns : `void`

### Properties

Protected _skeleton
`_skeleton: ```
Default value : `false`
Defined in src/structured-list/list-header.component.ts:52

columns
`columns: `QueryList<ListColumn>``
Type : `QueryList<ListColumn>`
Decorators : `@ContentChildren(ListColumn)`
Defined in src/structured-list/list-header.component.ts:45

selection
`selection: ```
Default value : `false`
Defined in src/structured-list/list-header.component.ts:50
Set by the containing `StructuredList`. Adds a dummy header for the selection column when set to true.

### Accessors

skeleton
get `skeleton()`
Defined in src/structured-list/list-header.component.ts:41
set `skeleton(value: any)`
Defined in src/structured-list/list-header.component.ts:36

Parameters :

Name | Type | Optional
value | `any` | No

Returns : `void`

    import {
    	Component,
    	HostBinding,
    	ContentChildren,
    	QueryList,
    	AfterContentInit,
    	Input
    } from "@angular/core";
    import { ListColumn } from "./list-column.component";

    /**
     * `ListHeader` provides a container for the `ListColumn`s that make up the header of a structured list.
     *
     * Example:
     * ```html
     * 	<ibm-list-header>
     *		<ibm-list-column nowrap="true">Column 1</ibm-list-column>
     *		<ibm-list-column nowrap="true">Column 2</ibm-list-column>
     *		<ibm-list-column>Column 3</ibm-list-column>
     *	</ibm-list-header>
     * ```
     */
    @Component({
    	selector: "ibm-list-header",
    	template: `
    		<div class="bx--structured-list-row bx--structured-list-row--header-row">
    			<ng-content></ng-content>
    			<div *ngIf="selection" class="bx--structured-list-th"></div>
    		</div>
    	`
    })
    export class ListHeader implements AfterContentInit {
    	@HostBinding("class.bx--structured-list-thead") wrapper = true;

    	@Input()
    	set skeleton(value: any) {
    		this._skeleton = value;
    		this.updateChildren();
    	}

    	get skeleton(): any {
    		return this._skeleton;
    	}

    	@ContentChildren(ListColumn) columns: QueryList<ListColumn>;

    	/**
    	 * Set by the containing `StructuredList`. Adds a dummy header for the selection column when set to true.
    	 */
    	selection = false;

    	protected _skeleton = false;

    	ngAfterContentInit() {
    		this.columns.forEach(column => {
    			column.isBodyColumn = false;
    			column.isHeaderColumn = true;
    		});
    		this.updateChildren();
    	}

    	protected updateChildren() {
    		if (this.columns) {
    			this.columns.toArray().forEach(child => child.skeleton = this.skeleton);
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""