2

I have a Component with the following class:

export class MyCustomComponent implements OnInit {
    @Input('stringToSubmit') stringToSubmit:string;

I am currently passing the value of stringToSubmit from the HTML this way:

<app-my-custom stringToSubmit="definedString"></app-my-custom>
<app-my-custom stringToSubmit="definedString2"></app-my-custom>
<app-my-custom stringToSubmit="definedString3"></app-my-custom>

The end goal is to call the same component multiple times using routerLinks but to change stringToSubmit so that I get different data returned.

I've redefined the string value in the Component, removing it from the @Input and assigning its type, but after hours of playing with it and trying to get different methods to work, I've come up empty:

export class MyCustomComponent implements OnInit {
    stringToSubmit: string;

The routing paths are defined as follows:

const routes: Routes = [
    { path: 'path-url', component: MyCustomComponent }
];

I'm unsure where to add the values of stringToSubmit from this point to get it working. I've looked into ActivatedRoute and defining the strings in multiple places including the path definitions and router links. What am I missing?

Chris Owens
  • 58
  • 1
  • 8
  • possible duplicate of https://stackoverflow.com/questions/36835123/how-do-i-pass-data-to-angular-routed-components see Günter Zöchbauer answer – Asura Feb 22 '18 at 03:02

1 Answers1

1

I'm assuming you want something like this:

[routerLink]="['path-url', stringToSubmit]"

or

routerLink="path-url/{{stringToSubmit}}"

To do this, you want a routing path like so:

const routes: Routes = [
    { path: 'path-url/:stringToSubmit', component: MyCustomComponent }
];

and then update your component to include:

import { Router, ActivatedRoute } from '@angular/router';

and

constructor(private route: ActivatedRoute) {}

And then do this OnInit:

public ngOnInit(): void {
    this.route.params.subscribe(params => {
        this.stringToSubmit = params.stringToSubmit;
    });
}
Simon K
  • 2,762
  • 1
  • 11
  • 20
  • Close, I should have been a little more specific. The component imports posts from an API and stringToSubmit is a URL parameter for that API and doesn't need to be part of the app's routing URL, but can be. I need to pass a different URL parameter to the component on each router link. I edited the original question to reflect my meaning. I'm unsure whether your answer will work, but am trying it now – Chris Owens Feb 22 '18 at 03:29
  • Are you saying you need your component to respond to a changing value of `stringToSubmit` or that you need to have multiple versions of the same component at once all with a different `stringToSubmit` value? – Simon K Feb 22 '18 at 03:35
  • Essentially I just need to change the value of stringToSubmit when clicking a nav link – Chris Owens Feb 22 '18 at 03:37
  • @ChrisOwens You can set the value of `stringToSubmit` from your `component` based on the response from your API – Tony Roczz Feb 22 '18 at 03:43
  • stringToSubmit is a parameter of the API URL, so I need to set it before making the call. I'm looking to be able to change the value of stringToSubmit from the template by either router links or click events so that when a link is clicked, the component calls the API again with the new string. – Chris Owens Feb 22 '18 at 04:03
  • @ChrisOwens, you should look into the Angular life-cycle event OnChanges, it gets triggered whenever the value for you `@Input` changes – Simon K Feb 22 '18 at 05:07