Angular Divider Component Overview

Angular Divider Example

By default the divider is a solid horizontal line.

Getting Started with Ignite UI for Angular Divider

To get started with the Ignite UI for Angular Divider component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

The next step is to import the IgxDividerModule in your app.module.ts file.

// app.module.ts

...
import { IgxDividerModule } from 'igniteui-angular/directives';
// import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDividerModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxDividerDirective as a standalone dependency.

// home.component.ts

import { IgxDividerDirective } from 'igniteui-angular/directives';
// import { IgxDividerDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-divider></igx-divider>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxDividerDirective]
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular Divider module or directive imported, you can start using the igx-divider component.

Using the Angular Divider

Vertical Divider

By adding the vertical attribute and setting its value to true, you can change the direction of the divider from horizontal to vertical.

<igx-divider [vertical]="true"></igx-divider>

Dashed Divider

The default style of the divider is a solid line but it can also be dashed. To change the default look simply use the type attribute of the divider and set its value to dashed.

<igx-divider type="dashed"></igx-divider>

Inset Divider

The divider can be set in on both sides. To inset the divider, set the middle attribute of the divider to true and provider the desired inset value, the divider will start shrinking from both ends.

Keep in mind that you have to add unit(px,rem,%…) at the end of the value otherwise, it will not work.

// Both side
<igx-divider [middle]="true" inset="80px"></igx-divider>

// Left side only 
<igx-divider inset="40px"></igx-divider>

If the value of the middle attribute is set to a false value, or if the attribute is omitted altogether, the divider will set in only on the left.

API References

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub