Toggle

The igxToggle directive allows the users to open, to interact with, to apply animations, and to close a toggle container. All toggle components implement the igxToggle or igxToggleAction internally, and users can implement toggle-based components and views, like dropdowns, while the igxToggleAction directive controls other components until the toggle umbrella.

Toggle Demo

Usage

The toggle allows you easily to wrap some content into a box which easily can be opened and closed. To get started with the IgniteUI for Angular Toggle, let's first import the IgxToggleModule in our app.module.ts. We are also planning to take advantage of igxButton directive so we will have to import IgxButtonModule into the app.module.ts too.

// app.module.ts

...
import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular/main'

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

Then in the template of our component we can apply the directive on the element we want to be togglable.

<!--template.component.html-->
<button class="toggle-button"  igxButton="raised" (click)="toggleContent()">Toggle</button>
<div class="toggle-content" igxToggle #toggleRef="toggle">
    <section class="toggle-section">
        <ul>
            <li>Bananas</li>
            <li>Apples</li>
            <li>Strawberries</li>
            <li>Raspberry</li>
            <li>Cherry</li>
        </ul>
    </section>
</div>

In order to show and hide this content we will have to invoke one of the two methods open/close.

import { IgxToggleDirective } from 'igniteui-angular/main'

@Component({
    ...
})
export class Class {
    @ViewChild(IgxToggleDirective) toggle: IgxToggleDirective;

    toggleContent() {
        if (this.toggle.collapsed) {
            this.toggle.open();
        } else {
            this.toggle.close();
        }
    }
}

If all went well, you should see the following in your browser:

Automatic toggle actions

In order to prevent this invocation of these methods there is a directive which has onClick handler and changes the state to the toggle we are referred to. So let's dive in. If we would like to take advantage of this functionality we will have to use IgxToggleActionDirective Which is comming from the same IgxToggleModule.

// app.module.ts

...
import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular/main'

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

Then in the template we need to declare IgxToggleActionDirective by assigning the IgxToggleDirective to it. The IgxToggleActionDirective should be declared on the element we are planing to use like a trigger(toggle).

<!--template.component.html-->
<button class="toggle-button"  igxButton="raised" [igxToggleAction]="toggleRef">Toggle</button>
<div class="toggle-content" igxToggle #toggleRef="toggle">
    <section class="toggle-section">
        <img src="link to random image"/>
    </section>
</div>

After these changes the toggle should work exactly in the same way.

Automatic toggle actions with service provider

There is a convenient way to keep the state and command our igxToggle through igxNavigationService provider which would be convenient for us to keep tracking it everywhere in our application. We just need to set identifier for our igxToggle directive and the registration into the service happens for us. If we would like this state to be controlled automatically again we just need to pass this identifier to our helping igxToggleActionDirective.

// app.module.ts

...
import { IgxToggleModule, IgxButtonModule } from 'igniteui-angular/main'

@NgModule({
    ...
    imports: [..., IgxToggleModule, IgxButtonModule]
    ...
})
export class AppModule {}
<!--template.component.html-->
<button igxToggleAction="toggleId" [closeOnOutsideClick]="true" class="toggle-button"  igxButton="raised">Toggle</button>
<div igxToggle id="toggleId" class="toggle-content" [collapsed]="false">
    <section class="toggle-section">
    <h3>Click 
        <br/> Out of the Box</h3>
    </section>
</div>

If all went well, it will look like this:

API Summary

In this article we covered the details of how to use Toggle directive. We created a content which would possible to be hidden or shown by invoking programmatically methods which determine this behaviour. Furthermore we added another helping directive which controls automatically this same behaviour by giving it the appropriate toggle reference. In the end we have registered our igxToggle directive in the igxNavigationService provider by giving it an ID, which we then provided to our helping igxToggleAction directive.

Inputs

The following inputs are available on the igxToggle directive:

Name Type Description
collapsed Boolean Determines whether the toggle is open or closed.
id Boolean Identifier which is registered into igxNavigationService.

The following inputs are available on the igxToggleAction directive:

Name Type Description
igxToggleAction IgxToggleDirective Accepts the toggle that has to be controlled.
closeOnOutsideClick IgxToggleDirective Determines whether toggle should be closed when you click outside.

Outputs

The following outputs are available on the igxToggle directive:

Name Type Description
onOpening EventEmitter Emits an event before the toggle container is opened.
onOpened EventEmitter Emits an event after the toggle container is opened.
onClosing EventEmitter Emits an event before the toggle container is closed.
onClosed EventEmitter Emits an event after the toggle container is closed.

Methods

The following methods are available on the igxToggle directive:

Name Type Description
open void Opens the toggle.
close void Closes the toggle.
toggle void Open or close the toggle depending on the state.

Additional Resources

Our community is active and always welcoming to new ideas.