### File

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

### Description

`ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.

Example:

     *     <ibm-list-row>
     *        <ibm-list-column>Row 1</ibm-list-column>
     *        <ibm-list-column nowrap="true">Row One</ibm-list-column>
     *        <ibm-list-column>
     *            Lorem ipsum dolor sit amet,
     *            consectetur adipiscing elit. Nunc dui magna,
     *            finibus id tortor sed, aliquet bibendum augue.
     *            Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.
     *            Pellentesque vulputate nisl a porttitor interdum.
     *        </ibm-list-column>
     *    </ibm-list-row>
     *

### Implements

`AfterContentInit`

### Metadata

selector | `ibm-list-row`

template

    <ng-content></ng-content>
    <ng-container *ngIf="selection">
    	<input
    		#input
    		tabindex="-1"
    		class="bx--structured-list-input"
    		type="radio"
    		[value]="value"
    		[name]="name"
    		[title]="label"
    		(change)="onChange($event)"
    		[checked]="selected"/>
    	<div class="bx--structured-list-td">
    		<ibm-icon-checkmark-filled16 class="bx--structured-list-svg"></ibm-icon-checkmark-filled16>
    	</div>
    </ng-container>

### Index

###### Properties

- columns
- input
- name
- selection

###### Methods

- ngAfterContentInit
- onChange

###### Inputs

- label
- selected
- value

###### Outputs

- change

###### HostBindings

- attr.tabindex
- class.bx--structured-list-row

###### HostListeners

- click

### Inputs

`label` | Applies an accessible label to the row. Defaults to no label.
Defined in src/structured-list/list-row.component.ts:60

`selected` | Default value : `false`
Defined in src/structured-list/list-row.component.ts:56

`value` | The value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.
Defined in src/structured-list/list-row.component.ts:64

### Outputs

`change` | Internal event used to notify the containing `StructuredList` of changes. `$event` Type: `EventEmitter<Event>`
Defined in src/structured-list/list-row.component.ts:68

### HostBindings

attr.tabindex
`attr.tabindex: ```
Default value : `this.selection ? "0" : null`
Defined in src/structured-list/list-row.component.ts:80

class.bx--structured-list-row
`class.bx--structured-list-row: ```
Default value : `true`
Defined in src/structured-list/list-row.component.ts:79

### HostListeners

click
`click()`
Defined in src/structured-list/list-row.component.ts:94

### Methods

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

onChange
`onChange(event)`
Defined in src/structured-list/list-row.component.ts:99

Parameters :

Name | Optional
event | No

Returns : `void`

### Properties

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

input
`input: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('input')`
Defined in src/structured-list/list-row.component.ts:84

name
`name: `string``
Type : `string`
Default value : `"list"`
Defined in src/structured-list/list-row.component.ts:77
Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.

selection
`selection: ```
Default value : `false`
Defined in src/structured-list/list-row.component.ts:73
Set by the containing `StructuredList`. Enables or disables row level selection features.

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

    /**
     * `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.
     *
     * Example:
     * ```html
     * 	<ibm-list-row>
     *		<ibm-list-column>Row 1</ibm-list-column>
     *		<ibm-list-column nowrap="true">Row One</ibm-list-column>
     *		<ibm-list-column>
     *			Lorem ipsum dolor sit amet,
     *			consectetur adipiscing elit. Nunc dui magna,
     *			finibus id tortor sed, aliquet bibendum augue.
     *			Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.
     *			Pellentesque vulputate nisl a porttitor interdum.
     *		</ibm-list-column>
     *	</ibm-list-row>
     * ```
     */
    @Component({
    	selector: "ibm-list-row",
    	template: `
    		<ng-content></ng-content>
    		<ng-container *ngIf="selection">
    			<input
    				#input
    				tabindex="-1"
    				class="bx--structured-list-input"
    				type="radio"
    				[value]="value"
    				[name]="name"
    				[title]="label"
    				(change)="onChange($event)"
    				[checked]="selected"/>
    			<div class="bx--structured-list-td">
    				<ibm-icon-checkmark-filled16 class="bx--structured-list-svg"></ibm-icon-checkmark-filled16>
    			</div>
    		</ng-container>
    	`
    })
    export class ListRow implements AfterContentInit {
    	@Input() @HostBinding("class.bx--structured-list-row--selected") selected = false;
    	/**
    	 * Applies an accessible label to the row. Defaults to no label.
    	 */
    	@Input() @HostBinding("attr.aria-label") label;
    	/**
    	 * The value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.
    	 */
    	@Input() value;
    	/**
    	 * Internal event used to notify the containing `StructuredList` of changes.
    	 */
    	@Output() change: EventEmitter<Event> = new EventEmitter();

    	/**
    	 * Set by the containing `StructuredList`. Enables or disables row level selection features.
    	 */
    	selection = false;
    	/**
    	 * Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.
    	 */
    	name = "list";

    	@HostBinding("class.bx--structured-list-row") wrapper = true;
    	@HostBinding("attr.tabindex") tabindex = this.selection ? "0" : null;

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

    	@ViewChild("input") input: ElementRef;

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

    	@HostListener("click")
    	onclick() {
    		if (!this.selection) { return false; }
    		this.input.nativeElement.click();
    	}

    	onChange(event) {
    		this.change.emit(event);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""