Angular - how to get properties?

Question

I'm confused about how to get a property of an Angular element. I'm using Angular Material, and in the documentation they describe how mat-button-toggle has a property called checked that signals whether the button is checked or not. So in my head for an element like:

<mat-button-toggle id="100"> Button </mat-button-toggle>

I should be able to do a

let element = document.getElementById("100");
let checked = element.checked;

However, the checked variable turns up as undefined. Why? And how can I programmatically check if the button is checked?

using property binding/event binding to track state. or using ViewChild — Tiep Phan, Sep 05 '19 at 12:55
If you don't want to use ElementRef through, use can use below code ` Button ` use can get value of button ` changes($event) { console.log($event); }` — Rahul Rathore, Sep 05 '19 at 13:35

TheAngularGuy · Answer 1 · 2019-09-05T13:16:26.470

1

You should never access your Angular elements using "querySelector" (or only as a last resort), instead use view child like this:

Template:


<mat-button-toggle #btnToggle> Button </mat-button-toggle>

documentation: https://angular.io/api/core/ViewChild

Component:

import { Component, OnInit, ViewChild } from '@angular/core';
//...

export class YourComponent implements OnInit {
  @ViewChild('btnToggle', { static: false }) btnToggle: matButtonToggle; // remove { static: false } if you're using Angular < 8 

  //....
  ngInit() {
     let checked = this.btnToggle.checked
     console.log(checked);
  }

}

edited Sep 05 '19 at 13:16

answered Sep 05 '19 at 13:02

TheAngularGuy

939
8
13

Doesn't really answer my question. I don't want to *change* the property, the default functionality does that - I want to *read* the state the property is in (f.e. I want to be able to get a list of buttons that are `checked`). – lte__ Sep 05 '19 at 13:04
I litetally wrote "And how can I programmatically check if the button is checked?". – lte__ Sep 05 '19 at 13:08
Well that's how you do it. I don't see where's the problem here? – TheAngularGuy Sep 05 '19 at 13:09
You wrote code on how to *change*it. I don't want to change the property, the default functionality does that - I want to read the state the property is in. – lte__ Sep 05 '19 at 13:11
I never wrote code to *change* it. Did you tried the solution? – TheAngularGuy Sep 05 '19 at 13:15
@lte__ this is how you read a property. this answer is correct .. what's your case exactly ? – Abbes Yassine Sep 05 '19 at 16:55

Abbas Amiri · Answer 2 · 2019-09-05T15:53:39.373

In Angular you can access the instance of a component with Template reference variable. To declare this kind of variable use #variableName in markup.

<component #theComponent></component>

So, in markup you can read properties of the component.

<div>{{theComponent.property}}</div>

Or access it in the code with ViewChild decorator.

@ViewChild('theComponent', {static: false}) theComponent : Component;

Now you have access to the instance of the Component and all of its properties and methods with theComponent property.

Sample code

When you put id in an Angular component, the document.getElementById gives you the instance of generated HtmlElement of the component and , abviously, there is no checked property, so it's undefined.

score 0 · Answer 3 · answered Sep 05 '19 at 12:56

0

You can use something like this:-

<mat-button-toggle id="100" [checked]="checkedValue"> Button </mat-button-toggle>

and in your component.ts file:-

You can have a class variable

public checkedValue: Boolean = true;

Now you can use this "checkedvalue" variable to do any of the programmatical manipulations that you want.

answered Sep 05 '19 at 12:56

ExpertNoob

149
1
9

I want `checked` to continue default behavior, I just want to read it. Is there really no straightforward way to access element properties in Angular? – lte__ Sep 05 '19 at 12:59

score 0 · Answer 4 · answered Sep 05 '19 at 13:21

You can use below code :

<mat-button-toggle #buttonToggle id="100"> Button </mat-button-toggle>

please import ElementRef

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('buttontoggle', { static: true }) buttonToggle: ElementRef;

//now you can access whole properties 
ngOnInit() {
  console.log(this.buttonToggle);
}

Angular - how to get properties?

4 Answers4

Linked