CODEWITHSUNDEEP
angular
Mohammed Ismail
Mohammed Ismail

Reputation: 67

pass variable from one page to another in angular 10

Hi I am trying to pass a variable from one component to another, I tried the following:

  @Output() public userFlow = new EventEmitter<boolean>();
  this.userFlow.emit(this.userFlowThrough);

Now in my other page I want to receive it but just in the ts file and not the html as it will be used for internal logic.

I tried this but it did not work:

 @Input() userFlow: boolean;

Upvotes: 1

Views: 6790

Answers (2)

Glitch07
Glitch07

Reputation: 95

In sender component .ts file you can add

sendData(){
    this.router.navigate(['receiverComponent'],{state:{data:this.userFlow}})
}

In receiver component .ts file add

userFlow = history.state.data;

Make sure to import router

Upvotes: 0

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 5648

Following approach might be useful for you!

In the receiver component typescript, you have to create a method to receive the value of the userFlow variable like this:

export class ReceiverComponent {

constructor() { }

userFlow:boolean;

receiveBooleanValue($event) {
  this.userFlow= $event
 }
}

In receiver component html put the following:

<app-sender (booleanValueEvent)="receiveBooleanValue($event)"></app-sender>
<h1>{{userFlow}}<h1>

In the sender component typescript (app-sender selector), you should declare a booleanValueEvent variable with the @Output() decorator and set it equal to a new event emitter.

  export class SenderComponent {

  userFlow: boolean = true;

  @Output() booleanValueEvent = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit(): void {
    this.booleanValueEvent.emit(this.userFlow)
  }
}

Upvotes: 2

Related Questions