How to navigate to a component with input by Angular code

Question

I have a component that receives input by activating from another component I need to navigate from one component to another by code and send in the navigation the input value. How do you do that?

I know how to navigate from one component to another but I do not know how to send it the input value. I would appreciate your assistance! Thanks.

this my 1 component:

 export class HostPersonalAreaComponent implements OnInit {

  constructor() { }
  panelOpenState = false;
  @Input() suggestion: Suggestion;

  ngOnInit() {
  console.log(this.suggestion);
   }
}

This is the code that navigates to the component written above:

    this.router.navigate(['/host-personal-area']);

The problem is that I did not send the input value. Does anyone know how to send?

score 3 · Answer 1 · answered Sep 09 '20 at 15:59

Input are handy when a parent component communicates with its child. In your case, you want to rely on other patterns.

Services

A stateful service that holds the variable you want to use from one view to another can be the most reliable pattern you'd want to try.

Generate a service (using cli), and add a private behaviorSubject to it with its public accessors:

@Injectable({
  providedIn: 'root',
})
export class MySingletonService {
  private suggestion: BehaviorSubject<Suggestion> = new BehaviorSubject(null);

  onSuggestionChange(): Observable<Suggestion> {
    return this.suggestion.asObservable();
  }
  
  setSuggestion(nextSuggestion: Suggestion): void {
    this.suggestion.next(nextSuggestion);
  }
  
  resetSuggestion(): void {
    this.suggestion.next(null);
  }
}

You can then set the suggestion in your first component, trigger the navigation, and access it in the second one.

export class MyFirstComponent {
  constructor(
    private myService: MyService,
    private router: Router
  ) {}
  
  setSuggestion(suggestion: Suggestion): void {
    this.myService.setSuggestion(suggestion);
    this.router.navigate(['to', 'second', 'component']);
  }
}

export class MySecondComponent {
  suggestion: Suggestion;
 
  constructor(private myService: MyService) {}
  
  ngOnInit(): void {
    this.myService.onSuggestionChange().subscribe(suggestion => this.suggestion = suggestion);
  }

}

Query Params

The second way to pass data is to use the url. You can add parameters to your route by using the queryParams argument:

this.router.navigate(['url'], { queryParams: { suggestion }});

And then get in from the second component through ActivatedRoute:

this.route.queryParams.subscribe((params) => { this.suggestion = params.get('suggestion');}

score 2 · Accepted Answer · answered Sep 09 '20 at 15:55

You could add an so called optional parameter to your route. In your first component you will need to add:

this.router.navigate(['/host-personal-area', {data: yourData}]);

This will result in a longer Url like http://localhost:4200/host-personal-area;data=yourData.

To read the data you need to add:

this.route.snapshot.paramMap.get('data');

to your second component, so you can retrieve the parameter value that you added to your route before. You could also have a look at Send data through routing paths in Angular for more information.

How to navigate to a component with input by Angular code

2 Answers2