How do I display a router parameter in an input box in Angular?

Published

I currently have my routes set as follows in my Angular project:

const routes: Routes = [
  { path: 'defect', component: AppComponent },
  { path: 'defect/:start', component: DefectComponent }
];

Then in the TS of my DefectComponent I have:

//route is declared in my parameters as ActivatedRoute
ngOnInit(): void {
    let temp = this.route.snapshot.paramMap.get('start');
    if(temp) {
      this.timestamp.TestStart = temp;
    }
  }

In the html of my DefectComponent I have:

<input id="TestStart" [(ngModel)]="timestamp.TestStart" placeholder="Time">
  <button class="findSteps" (click)="createCases(timestamp)">
    Find Failed Cases
  </button>

I figured this would autofill my input with the ‘start’ parameter when I call it with a url like:

http://localhost:4200/defect?start=272020-02-06_0348100661PM

because it was added to timestamp.TestStart onInit, but right now it still is just displaying "Time." Any ideas on what I’m doing wrong?

Thoughts I’ve already had:

  • Does ngModel come before the ngOnInit?
  • Am I somehow passing the parameter into the url wrong?

Source: Angular Questions

Published
Categorized as angular, ngmodel, routes, typescript, url Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq