gistfile1.txt

import { Component } from '@angular/core';
export class Hero {
  name: string,
  event_name: string,
  email:string
}
var Heroes:Hero[]=[{name:'',event_name:'',email:''}];
var local :Hero[];

@Component({
    selector: 'my-app',
  template: `

<!-- Modal Trigger -->
  <a class="btn-floating btn-large waves-effect waves-light red modal-trigger" href="#modal2"><i class="material-icons">add</i></a>

<div id="modal2" class="modal modal-fixed-footer">
    <div class="modal-content">
    <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input #NewName  id="name" type="text" class="validate">
          <label for="name">Full Name</label>
  </div>
      </div>
    <div class="row">
        <div class="input-field col s6">
          <input #NewEvent  id="event_name" type="text" class="validate">
          <label for="event_name">event name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s6">
          <input #NewEmail id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
    </form>
  </div>
    </div>
    <div class="modal-footer">
      <a (click)=addHero({name:NewName.value,event_name:NewEvent.value,email:NewEmail.value})  href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>



<ul class="collection with-header">
    <li *ngFor="let hero of heroes" class="collection-item"><div>title<a (click)="onSelect(hero)"href="#modal1" class="secondary-content">
    <i class="material-icons">send</i></a></div>
      <h4>name:{{hero.name}}</h4>
       <h5>event name :{{hero.event_name}}</h5>
       <h6>email {{hero.email}}</h6>
    </li>

</ul>

<!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>Modal Header</h4>
     name: <input value = {{selectedHero.name}} #name>
     event name: <input value = {{selectedHero.event_name}} #event_name>
     email: <input value = {{selectedHero.email}} #email>
    </div>
    <div class="modal-footer">
      <a (click)="update({name:name.value,event_name:event_name.value,email:email.value})" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
  </div>
 
  `
})
export class AppComponent {

    heroes = Heroes;
    selectedHero = {name:'',event_name:'',email:''};
  ngOnInit(){
  this.local = localStorage.getItem("heroes");
  if ( JSON.parse(this.local).length > 1 ){
      
      this.heroes = JSON.parse(this.local) ;
   }

   $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal').modal();
  });

     $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('#modal2').modal();
  });


   




    }

     addHero(hero: Hero){
     if(hero.name){
      this.heroes.push(hero);
    // console.log(this.heroes);
     
     localStorage.setItem("heroes", JSON.stringify(this.heroes));
  }
  console.log(name);
  }
  onSelect(hero: Hero): void {
  this.selectedHero = hero;

  
}

  update(hero: Hero): void{
  const index = this.heroes.indexOf(this.selectedHero);
    this.heroes[index] = hero;
    localStorage.setItem("heroes", JSON.stringify(this.heroes));
  }
}