CODEWITHSUNDEEP
javascripttypescriptangular
Ravi Zarekar
Ravi Zarekar

Reputation: 55

i am coding ..todo task manger in Angular2.... having to update select option value ....in localStorage

Here is my problem regarding to-do task management. I want to update an option value in select selector when the (change) event is triggered.

there are 2 Component //app.component.ts

//array object
this.dataArr[this.counter] = {id: this.task_ID, name: this.t_name, msg: this.t_msg, date: this.task_date};

//console.log(this.counter);    
console.log(this.dataArr[this.counter]);    

//local storage
if (typeof(Storage) !== "undefined") {
    localStorage.setItem("taskM", JSON.stringify(this.dataArr.reverse()));                  //put object array in reverse order to show latest object at top position

this.myObj = JSON.parse(localStorage.getItem("taskM"));
}

in this component I want to change and save select option value to localStorage
//task-form.component.ts.

import { Component, OnInit, Input, Output } from '@angular/core';
import { AppComponent }    from './app.component';


@Component({
  selector: 'task-data',
  template: `<h3>List of Task</h3>

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
     <tr>
    <th>Task Id</th>
        <th>Task Title</th>
        <th>Description</th>
        <th>Date</th>
        <th>Status</th>
    </tr>
    </thead>

    <tbody>

    <tr *ngFor="let hero of taskMM">
    <td> {{ hero.id }} </td>
    <td> {{ hero.name }} </td>
    <td> {{ hero.msg }} </td>
    <td> {{ hero.date }} </td>
    <td>
    <select class="form-control">
      <option *ngFor="let p of taskStatus"[value]="p">           {{p}}</option>
    </select>
    </td>
     </tr>

    </tbody>
    </table>



    </div>
  `
})

export class TaskFormComponent {

  taskStatus: string[];
  taskMM: string[] = JSON.parse(localStorage.getItem("taskM"));

  @Input('task-s') t_status: string;    
  @Input() data1: any= [];  

  onChange(deviceValue) {
    console.log(deviceValue);
  }


  ngOnInit() {
        console.log('this is ngOnInit ');
   }

  constructor() {
        this.taskStatus = ['Started', 'Pending', 'Completed'];

    }   

}

Upvotes: 0

Views: 75

Answers (1)

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

<select (change)="onChange($event.target.value)" class="form-control">
  <option *ngFor="let p of taskStatus"[value]="p">           {{p}}</option>
</select>

onChange($event) {
    localStorage.setItem("taskM", $event); 
}

Upvotes: 0

Related Questions