This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
Say hello to Angular's future home!Check out Angular.devHome
/
API > @angular/core

DebugElement

      
      class DebugElement extends DebugNode {
  constructor(nativeNode: Element)
  nativeElement: any
  name: string
  properties: {...}
  attributes: {...}
  styles: {...}
  classes: {...}
  childNodes: DebugNode[]
  children: DebugElement[]
  query(predicate: Predicate<DebugElement>): DebugElement
  queryAll(predicate: Predicate<DebugElement>): DebugElement[]
  queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[]
  triggerEventHandler(eventName: string, eventObj?: any): void

  // inherited from core/DebugNode
  constructor(nativeNode: Node)
  nativeNode: any
  parent: DebugElement | null
  injector: Injector
  componentInstance: any
  context: any
  listeners: DebugEventListener[]
  references: {...}
  providerTokens: any[]
}

See also

Constructor

      
      constructor(nativeNode: Element)
Parameters
nativeNode Element

Properties

Property Description
nativeElement: any Read-Only

The underlying DOM element at the root of the component.
name: string Read-Only

The element tag name, if it is an element.
properties: { [key: string]: any; } Read-Only

Gets a map of property names to property values for an element.

This map includes:

  • Regular property bindings (e.g. [id]="id")

  • Host property bindings (e.g. host: { '[id]': "id" })

  • Interpolated property bindings (e.g. `id="{{ value }}")

    It does not include:

  • input property bindings (e.g. [myCustomInput]="value")

  • attribute bindings (e.g. [attr.role]="menu")
attributes: { [key: string]: string | null; } Read-Only

A map of attribute names to attribute values for an element.
styles: { [key: string]: string | null; } Read-Only

The inline styles of the DOM element.
classes: { [key: string]: boolean; } Read-Only

A map containing the class names on the element as keys.

This map is derived from the className property of the DOM element.

Note: The values of this object will always be true. The class key will not appear in the KV object if it does not exist on the element.

See also:
childNodes: DebugNode[] Read-Only

The childNodes of the DOM element as a DebugNode array.

See also:
children: DebugElement[] Read-Only

The immediate DebugElement children. Walk the tree by descending through children.

Methods

query()

 
      
      query(predicate: Predicate<DebugElement>): DebugElement
Parameters
predicate Predicate<DebugElement>
Returns

DebugElement: the first DebugElement that matches the predicate at any depth in the subtree.

queryAll()

 
      
      queryAll(predicate: Predicate<DebugElement>): DebugElement[]
Parameters
predicate Predicate<DebugElement>
Returns

DebugElement[]: All DebugElement matches for the predicate at any depth in the subtree.

queryAllNodes()

 
      
      queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[]
Parameters
predicate Predicate<DebugNode>
Returns

DebugNode[]: All DebugNode matches for the predicate at any depth in the subtree.

triggerEventHandler()

Triggers the event by its name if there is a corresponding listener in the element's listeners collection.

See also:

 
      
      triggerEventHandler(eventName: string, eventObj?: any): void
Parameters
eventName string

The name of the event to trigger
eventObj any

The event object expected by the handler

Optional. Default is undefined.
Returns

void

If the event lacks a listener or there's some other problem, consider calling nativeElement.dispatchEvent(eventObject).