### File

`src/skeleton/skeleton-text.component.ts`

### Implements

`OnChanges`

### Metadata

selector | `ibm-skeleton-text`
template |
    <p
    	*ngFor="let width of lineWidths"
    	class="bx--skeleton__text"
    	[style.width]="width">
    </p>

### Index

###### Properties
lineWidths
###### Methods
getRandomInt ngOnChanges
###### Inputs
lines maxLineWidth minLineWidth

### Inputs

`lines` | Default value : `5`
Defined in src/skeleton/skeleton-text.component.ts:14

`maxLineWidth` | Default value : `300`
Defined in src/skeleton/skeleton-text.component.ts:18

`minLineWidth` | Default value : `100`
Defined in src/skeleton/skeleton-text.component.ts:16

### Methods

getRandomInt
`getRandomInt(min, max)`
Defined in src/skeleton/skeleton-text.component.ts:25
Returns a random width in pixels based off a min width, and a max width. Parameters :
Name | Optional
min | No
max | No
Returns : `string`

ngOnChanges
`ngOnChanges()`
Defined in src/skeleton/skeleton-text.component.ts:29
Returns : `void`

### Properties

lineWidths
`lineWidths: `Array<string>``
Type : `Array<string>`
Defined in src/skeleton/skeleton-text.component.ts:20

    import { Component, Input, OnChanges } from "@angular/core";

    @Component({
    	selector: "ibm-skeleton-text",
    	template: `
    		<p
    			*ngFor="let width of lineWidths"
    			class="bx--skeleton__text"
    			[style.width]="width">
    		</p>
    	`
    })
    export class SkeletonText implements OnChanges {
    	@Input() lines = 5;

    	@Input() minLineWidth = 100;

    	@Input() maxLineWidth = 300;

    	lineWidths: Array<string>;

    	/**
    	 * Returns a random width in pixels based off a min width, and a max width.
    	 */
    	getRandomInt(min, max) {
    		return `${Math.floor(Math.random() * (max - min + 1) + min) + "px"}`;
    	}

    	ngOnChanges() {
    		// Creates an array of length defined by input lines with content from
    		// 0 to lines - 1, maps each value to a random width in pixels.
    		this.lineWidths =
    			Array.from(Array(this.lines).keys())
    				.map(num => this.getRandomInt(this.minLineWidth, this.maxLineWidth));
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""