Class IgxButtonDirective

The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button.

Igx Module

IgxButtonModule

Igx Parent

Data Entry & Display

Igx Theme

igx-button-theme

Igx Keywords

button, span, div, click

Remarks

The Ignite UI Button directive is intended to be used by any button, span or div and turn it into a fully functional button.

Example

<button type="button" igxButton="outlined">A Button</button>

Hierarchy

IgxButtonBaseDirective
- IgxButtonDirective

Implements

AfterContentInit

Constructors

Properties

Accessors

Methods

Constructors

constructor

new IgxButtonDirective(element, _renderer): IgxButtonDirective
Overrides IgxButtonBaseDirective.constructor
- Defined in projects/igniteui-angular/src/lib/directives/button/button.directive.ts:116
Parameters
- element: ElementRef<any>
- _renderer: Renderer2
Returns IgxButtonDirective

Properties

buttonClick

buttonClick: EventEmitter<any> = ...

Emitted when the button is clicked.

buttonSelected

buttonSelected: EventEmitter<IButtonEventArgs> = ...

Called when the button is selected.

disabled

disabled: boolean = false

Enables/disables the button.

Example

<button igxButton="fab" disabled></button>

element

element: ElementRef<any>

role

role: string = 'button'

Sets/gets the role attribute.

Example

this.button.role = 'navbutton';
let buttonRole = this.button.role;

Accessors

label

set label(value): void
- Defined in projects/igniteui-angular/src/lib/directives/button/button.directive.ts:156
Sets the aria-label attribute.
Example
```
<button type="button" igxButton="flat" igxLabel="Label"></button>
```
Parameters
- value: string
Returns void

nativeElement

get nativeElement(): any
Inherited from IgxButtonBaseDirective.nativeElement
- Defined in projects/igniteui-angular/src/lib/directives/button/button-base.ts:99
Returns the underlying DOM element.

Returns any

selected

get selected(): boolean
- Defined in projects/igniteui-angular/src/lib/directives/button/button.directive.ts:112
Returns boolean
set selected(value): void
- Defined in projects/igniteui-angular/src/lib/directives/button/button.directive.ts:105
Gets or sets whether the button is selected. Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
Example
```
<button type="button" igxButton="flat" [selected]="button.selected"></button>
```
Parameters
- value: boolean
Returns void

type

set type(type): void
- Defined in projects/igniteui-angular/src/lib/directives/button/button.directive.ts:140
Sets the type of the button.
Example
```
<button type="button" igxButton="outlined"></button>
```
Parameters
- type: IgxButtonType
Returns void

Methods

ngAfterContentInit

ngAfterContentInit(): void
Implementation of AfterContentInit.ngAfterContentInit
- Defined in projects/igniteui-angular/src/lib/directives/button/button.directive.ts:123
A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.

Returns void

Class IgxButtonDirective

Igx Module

Igx Parent

Igx Theme

Igx Keywords

Remarks

Example

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

element: ElementRef<any>

_renderer: Renderer2

Returns IgxButtonDirective

Properties

buttonClick

buttonSelected

disabled

Example

element

role

Example

Accessors

label

Example

Parameters

value: string

Returns void

nativeElement

Returns any

selected

Returns boolean

Example

Parameters

value: boolean

Returns void

type

Example

Parameters

type: IgxButtonType

Returns void

Methods

ngAfterContentInit

Returns void