Set value of local iteration scoped variable in angular 2

Question

I have the below HTML in Angular

<span *ngIf="ControllerType?.AttributeID =='Controller Type'">                                            
    <select multiple name="ControllerType.Default" [(ngModel)]="ControllerType1">
        <option *ngFor="let z of ControllerType.Options" value={{z.OptionID}}>
            {{z.OptionID}}
        </option>
    </select>
</span>

What I want to know is how can I set ControllerType.Default which is of type string to get the values selected in ControllerType1. So whatever values were selected and stored in ControllerType1 should also be stored in ControllerType.Default

Doing this {{ControllerType.Default=ControllerType1;""}} after the Select tag and inside the iteration just errors out.

Sachila Ranawaka · Accepted Answer · 2017-04-27 05:42:40Z

1

use the expression inside the ngModelChange

<span *ngIf="ControllerType?.AttributeID =='Controller Type'">
   <select multiple name="ControllerType.Default" [(ngModel)]="ControllerType1"  (ngModelChange)="ControllerType.Default = ControllerType1">
   <option *ngFor="let z of ControllerType.Options" value={{z.OptionID}}>
      {{z.OptionID}}
   </option>
   </select>
</span>

updated

create and ngInit directive and call it in the HTML

@Directive({
  selector: 'ngInit',
  exportAs: 'ngInit'
}) 
export class NgInit {
  @Input() values: any = {};

  @Input() ngInit;
  ngOnInit() {
    if(this.ngInit) { this.ngInit(); }
  }  
}

assign the expression under ngInit directive

[ngInit]="ControllerType1 = ControllerType.Default"

  <span [ngInit]="ControllerType1 = ControllerType.Default"  *ngIf="ControllerType?.AttributeID =='Controller Type'">
       <select multiple name="ControllerType.Default" [(ngModel)]="ControllerType1"  (ngModelChange)="ControllerType.Default = ControllerType1">
       <option *ngFor="let z of ControllerType.Options" value={{z.OptionID}}>
          {{z.OptionID}}
       </option>
       </select>
    </span>

edited Apr 27, 2017 at 5:42

answered Apr 27, 2017 at 5:14

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SP1 Over a year ago

very cool..how can I load the value back on page refresh so basically do the opposite {{ControllerType1 = ControllerType.Default}} so the selected value that were saved gets displayed.

Sachila Ranawaka Over a year ago

if you want to keep the values after the page refresh then you need to store if in the localstorage or something and retrieve it at the time page load

SP1 Over a year ago

Yeah I am storing it in the DB..ControllerType.Default is how it is stored and is what contains the stored values when page refreshes..but how do I map it to ControllerType1 so it displays on the page.

Sachila Ranawaka Over a year ago

in your export class assign ControllerType1 = ControllerType.Default initially

SP1 Over a year ago

There are a lot of these select types and then i ll have to do the loop in the export class as well..Is it possible that I can do something like that in the html where I am already iterating.

|

Collectives™ on Stack Overflow

Set value of local iteration scoped variable in angular 2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related