Wsrtjtyk

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>

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)

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