如何将变量值从HTML传递到Angular

Question

I am trying to pass variable value from HTML to Angular. Something like as shown below:

<span (click)= "toggle()" toggled = "true" class="glyphicon glyphicon-unchecked"></span>

And in controller:

@Input() toogled: any;

 toggle () {
   console.log(this.toogled);
   -----
   -----
}

When I am doing console.log I am getting result as undefined.

I know that it is possible to create own directive and attach a new property to directive and use something like:

<my-directive [toggled] = "true"></my-directive>

But I want to know if its some work around to bind the properties that element doesn't have.

Answer 1

There might some other way but you can try two way data binding like this

<span (click)="toggle()" [(ngModel)]="toggled" class="glyphicon glyphicon-unchecked"></span>

in ts file you have to define:

public toggled: boolean

use method toggle() to toggle the value