Local Storage/Session Storage

Question

My Html file is as follows:

<h2>Welcome User!!!</h2>
<form class="container" action="/product">
    <div>
        <label for="mail"><b>Email-ID: [(ngModel)]</b></label>
        <input type="text" placeholder="Enter mail ID" [(ngModel)]="mail" name="mail" required>
        <label for="psw"><b>Phone Number</b></label>
        <input type="text" placeholder="Enter Phone Number" [(ngModel)]="mail" name="phoneNumber" required>

        <button (click)="myFunc()">NEXT</button>
    </div>
</form>

My Typescript file is as follows:

   import { Component, NgModule, OnInit } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
import { MyProductPageComponent } from '../my-product-page/my-product-page.component';


@Component({
  selector: 'app-my-home-page',
  templateUrl: './my-home-page.component.html',
  styleUrls: ['./my-home-page.component.css']
})

export class MyHomePageComponent implements OnInit {
  phoneNumber = "";
  mailID = "";

  constructor(private router: Router) {
  }

  ngOnInit(): void {
  }

  myFunc() {
    localStorage.setItem("phoneNumber", this.phoneNumber);
    localStorage.setItem("mail", this.mailID);
    this.router.navigate(['/products']);
  }
}

const routes: Routes = [
  { path: 'MyProductPageComponent', component: MyProductPageComponent },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

I want to fetch Phone number and Mail ID entered in form and save that in Local Storage. And redirect to the next page. Please help. Am getting this error: Declaration expected.

Answer 1

you need to use ngmodel to bind the value with input control and same you can access in your component.

 <h2>Welcome User!!!</h2> <form class="container" action="/product"> <div> <label for="mail"><b>Email-ID: </b></label> <input type="text" [(ngModel)]="mailID" placeholder="Enter mail ID" name="mail" required> <label for="psw"><b>Phone Number</b></label> <input type="text" placeholder="Enter Phone Number" name="phoneNumber" [(ngModel)]="phoneNumber" required> <button (click)="myFunc()">NEXT</button> </div> </form>

Answer 2

1. Add variables to phone/mail in your .ts components

2. Use this to variables in myFunc() to get the value of the variables

3. Use ngModel to bind the variables with the input of the user (set ngModel on the input not label).

4. Use import { NgModule } from '@angular/core'; in the app.module and NOT in your component

see working code

<h2>Welcome User!!!</h2>
<form class="container" action="/product">
    <div>
        <label for="mail"><b>Email-ID:</b></label>
        <input type="text" placeholder="Enter mail ID"  [(ngModel)]="mail" name="mail" required>
        <label for="psw"><b>Phone Number</b></label>
        <input type="text" placeholder="Enter Phone Number" [(ngModel)]="phoneNumber" name="phoneNumber" required>

        <button (click)="myFunc()">NEXT</button>
    </div>
</form>


  phoneNumber = "";
  mailID = "";
  myFunc() {
    localStorage.setItem("phoneNumber", this.phoneNumber);
    localStorage.setItem("mail", this.mailID);
  }

Answer 3

        const routes: Routes = [
          { path: 'MyProductPageComponent', component: MyProductPageComponent },
        ]
        The path variable should not have a component  and you are using router.navigate('/products') 
       const routes: Routes = [
          { path: 'products', component: MyProductPageComponent },
        ]
These variables which are used in the ts should bind with the ngModel used in the template 
phoneNumber = "";
mailID = "";

<h2>Welcome User!!!</h2>
<form class="container" action="/product">
    <div>
        <label for="mail"><b>Email-ID: </b></label>
        <input type="text" placeholder="Enter mail ID" [(ngModel)]="mailID" name="mail" required>
        <label for="psw"><b>Phone Number</b></label>
        <input type="text" placeholder="Enter Phone Number" [(ngModel)]="phoneNumber" name="phoneNumber" required>

        <button (click)="myFunc()">NEXT</button>
    </div>
</form>