On this page

Angular Placeholder Component

Use Angular placeholders for your components or pages to indicate something may still be loading.

About

Placeholders can be used to enhance the experience of your application. You will, need set some custom widths totoggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

Example

In the example below, we take a typical card component and recreate it with placeholders applied to create a "loadingcard". Size and proportions are the same between the two.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

How it works

Create placeholders with thecPlaceholder directive and a gridcolumn cCol directive (e.g.,cCol="6") to set thewidth. They canreplace the text inside an element or be added as a modifier to an existingcomponent.

The useof aria-hidden="true" only indicates that the element should be hidden to screen readers. Theloadingbehavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to updatethings, etc. Some code may be needed toswap the state of the placeholder and inform users of theupdate.

Width

You can change thewidth through grid column classes, width utilities, or inline styles.

Color

By default, thecPlaceholder usescurrentColor. This can be overridden with a custom color or utility class.

Sizing

The size ofcPlaceholder are based on the typographic style ofthe parent element. Customize them withsize prop:lg,sm, orxs.

Animation

Animate placeholders withcPlaceholderAnimation="glow" orcPlaceholderAnimation="wave" to better convey the perception of somethingbeingactively loaded.

API

Placeholder Module

import { PlaceholderModule, GridModule, UtilitiesModule } from '@coreui/angular';@NgModule({   imports: [     PlaceholderModule,     GridModule,     UtilitiesModule   ]})export class AppModule() { }

cPlaceholder

directive

name	description	type	default
`cPlaceholder`	Toggle placeholder visibility.	`boolean`	`true`
`size`	Size the component small or large.	`xs \| sm \| lg`	undefined

cPlaceholderAnimation