3

How can I toggle an input to a component using a button, without creating a component property to hold the value?

example:

      <button #componentVisibility (click)="componentVisibility.value = !componentVisibility.value" value="false">
        show graph
      </button>

      <my-component [graphVisible]="componentVisibility.value"></my-component>

This one for example is not good because value has to be a string, and I need to toggle a boolean and pass it in.

How can I toggle a local template boolean and pass it in to a component, without creating a component property to hold it?

Note: Doing the following throws a transpile error:

      <button (click)="graphVisible ? graphVisible = false:graphVisible = true;" value="false">
        show graph
      </button>

      <my-component [graphVisible]="graphVisible"></my-component>

Error thrown about graphVisible not being a property on the parent component.

Tomas Katz
  • 1,653
  • 1
  • 13
  • 27
  • Hi, firstly you aren't using input but button so accessing `value` might be tricky as it's not its default property. As second question: so you don't want to use `@viewChild` to get a reference of node, you want to just access it without creating property on component? If so, just use vanilla JS method `document.getDocumentById` and omit any Angular property when dealing with it. Also, could you elaborate why you don't want to create this property on parent component? – Mortimer Jul 04 '21 at 11:38

0 Answers0