How to display recieved form input data to other component in Angular 6?

Question

register.component.html (the form input component)

<div class="card-content">

    <form #registerForm="ngForm" (ngSubmit)="onSubmit(Name.value, Email.value)">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">account_circle</i>
          <input type="text" name="Name"
          #Name
          ngModel required>
          <label for="Name">Name</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">mail_outline</i>
          <input type="text" name="Email"
          #Email
          ngModel
          required
          [pattern]="emailPattern">
          <label for="Email">Email</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <button class="btn-large btn-submit"
          type="submit"
          [disabled]='!registerForm.valid'>Start</button>
        </div>
      </div>

    </form>

  </div>

register.component.ts ........................................................................................

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { QuizService } from '../shared/quiz.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';

  constructor(private route: Router, private quiz: QuizService) { }

  user = {
    username: '',
    email: ''
  };

  ngOnInit() {
  }

  onSubmit(name, email) {
    this.user.username = name;
    this.user.email = email;

    this.route.navigate(['quiz']);
    console.log(this.user.username, this.user.email); // log works!!

  }

}

quiz.component.html (here i want to display the data which user entered in register component) .........................................................

<div class="row">
  <div class="col s6 offset-s3">
    <h3>Welcome to quiz</h3>

    <b>Your Name is: </b> 
    <br>
    <b>Your Email is: </b>
  </div>
</div>

Check this - [stackoverflow.com/questions/53202385/…

Rahul
– Rahul

2018-11-08 09:27:21 +00:00
Commented Nov 8, 2018 at 9:27 — Rahul
– Rahul, Commented Nov 8, 2018 at 9:27

junk · Accepted Answer · 2018-11-08 09:07:19Z

3

this.route.navigate(['quiz',{username:username,...}])

and in your quiz component receive data

this.route.params.subscribe(params=>{ console.log(params.username)})

don't forget inject the ActivatedRoute in your quiz

constructor(private route:ActivatedRoute)

answered Nov 8, 2018 at 9:07

junk

9974 gold badges11 silver badges29 bronze badges

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

Comments

Neil Stevens · Accepted Answer · 2018-11-08 09:10:09Z

1

There are many way to accomplish this but I would suggest looking at NgRX Store, if you want a simpler solution then you can use a service:

@Injectable({
  provideIn: ‘root’
})
export class SomeService {
  userSubject = new BehaviorSubject<User>({});
  user$: Observable<User> = this.userSubject;
}

In your RegisterComponent submit event you will call someService.userSubject.next(this.user); and in your QuizComponent subscribe to someService.user$ to pick up the data

answered Nov 8, 2018 at 9:10

Neil Stevens

3,9547 gold badges45 silver badges75 bronze badges

Collectives™ on Stack Overflow

How to display recieved form input data to other component in Angular 6?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related