Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

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(predicate: Predicate<DebugElement>): DebugElement
    
Parameters
predicate Predicate<DebugElement>
Returns

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

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

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

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

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

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).