Docs4dev
Docs
angular / 13 / api / core / debugelement.html

DebugElement

class final 

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.

Will be null if there is no style property on the underlying DOM element.

See also:
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
Returns

void

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

© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v13.angular.io/api/core/DebugElement