-6

I'm not able to figure out how to use two way binding in angular 4 directive.

In AngularJs I used to do it like this:

<random-directive binded='name' binded2="xyz"></random-directive>

And in directive definition add = after name. And now I can change name from the directive controller or link.

But in Angular 2-6 tutorial I'm not able to find out how to do that. Doing this:

<random-directive [binded]='name' [binded2]='name2'></random-directive>

Leads to one way binding to name only. But I want to change the variable from directive itself so is it possible?

3 Answers3

6
<random-directive [(ngModel)]='name'></random-directive>

In order to use ngModel you have to import in your module FormsModule from "@angular/forms"

Here is an example plunker I made for you:

https://plnkr.co/edit/AReq0QngbE9130Bd38Qq?p=preview

You can't use multiple variables with a single ngModel, but you can bind it to an object. If you define in your ts an object like this:

public myObject = { name: 'John', surname: 'Doe' }

Then you can bind multiple inputs to your object properties, like this:

<input [(ngModel)]="myObject.name" />
<input [(ngModel)]="myObject.surname" />

According to your edit you need to use @Input()

In your .ts component declare @Input() binded; and @Input() binded2; at the beginning of you component.

export class RandomDirective {
   @Input() binded;
   @Input() binded2;
}

then you can use

<random-directive [(binded)]=“myVar” [(binded2)]=“myVar2”><random-directive>
Gianluca Paris
  • 1,391
  • 1
  • 14
  • 25
  • Can you use multiple variables with [(ngModel)] ? –  Feb 01 '18 at 09:59
  • I've edited the question @Gianluca Paris Can please edit your answer accordingly as I think I'm not able to explain what I want so I created a plunk for that. –  Feb 04 '18 at 05:56
  • And how to use @Input() or @Output please edit your plunk I'm stuck here for long time now –  Feb 05 '18 at 09:19
  • done, please also check documentation https://angular.io/guide/component-interaction – Gianluca Paris Feb 05 '18 at 09:42
1

Two way binding

Angular 1

 <input ng-model="username">

Angular2 and all above versions

 <input [(ngModel)]="username">

One way binding for all versions

<p>Hello {{username}}!</p>

You could check this documentation of two way binding in angular: for more information.

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • Can you use multiple variables with [(ngModel)] ? –  Feb 01 '18 at 10:01
  • @BlackMamba No, as per my knowledge you can't, reason is you can bind single variable at the time of binding , but yes you can use method too. – Pardeep Jain Feb 01 '18 at 10:28
  • @PardeepJain In angular Js we used to use ng-model for inputs only and like https://stackoverflow.com/questions/14908133/what-is-the-difference-between-vs-and-in-angularjs questioni –  Feb 01 '18 at 17:37
  • @BlackMamba, yes I know. Thanks for the link :) – Pardeep Jain Feb 02 '18 at 05:38
  • Can you please provide a way as requested in my updated question –  Feb 02 '18 at 05:55
0

This blog helped me a lot:

One thing that both the above answers not specifying was the valueChange that is to be emitted so that the value change reflects automatically.That was what confusing me.

//If using ngModel this is the html
<input [ngModel]="username" (ngModelChange)="username = $event">
// Or go with [(ngModel)]
<p>Hello {{username}}!</p>
//The component here
@Component({

 selector: 'custom-counter',
  template: `
    <button (click)="decrement()">-</button>
    <span>{{counter}}</span>
    <button (click)="increment()">+</button>
  `
})
export class CustomCounterComponent {

  counterValue = 0;

  get counter() {
    return this.counterValue;
  }

  set counter(value) {
    this.counterValue = value;
  }

  decrement() {
    this.counter--;
  }

  increment() {
    this.counter++'
  }
}


// The parent here
@Component()
export class CustomCounterComponent {

  counterValue = 0;

  @Input()
  get counter() {
       return this.counterValue;
     }
      ...
  }
  //The html
<custom-counter [(counter)]="someValue"></custom-counter>

<p>counterValue = {{someValue}}</p>
//The directive with model config
@Component()
export class CustomCounterComponent {

  ...
  @Output() counterChange = new EventEmitter();

  set counter(val) {
    this.counterValue = val;
    this.counterChange.emit(this.counterValue);
  }
  ...
}
Black Mamba
  • 13,632
  • 6
  • 82
  • 105