Get param from URL with c# send to angular side

Question

I would like to send an optional parameter to the url of my app to use as a placeholder for one of my text boxes. I've tried a couple of different approaches and cant seem to get any of them to get the param from the URL in my c# code and pass it to my angular. Any help would be greatly appreciated!

*I tried using //import { ActivatedRoute, Params } from '@angular/router'; but, it keeps giving me this issue. ("no provider for ActivatedRoute") which im okay with not using I would rather get it from my c# code so I can do some minor manipulation on it and then send the param to my angular if possible.

C# controller

   [Route("api/[controller]")]
   public class PasswordController : Controller
   {
       private readonly AppSettings _options;

       public PasswordController(IOptions<AppSettings> optionsAccessor)
       {
           _options = optionsAccessor.Value;

       }

       /// <summary>
       /// Returns the ClientSettings object as a JSON string
       /// </summary>

       [HttpGet]
       public IActionResult Get([FromQuery]string emp)
       {
           //I get nothing on this...
           var x = HttpContext.Request.Query["emp"].ToString();
               Response.Headers.Add("x-emp-name", x);
           return Json(_options.ClientSettings);
       }

Change-pass.ts

import { Title } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { MatSnackBar, MatDialog } from '@angular/material';
import { FormControl, FormGroup, Validators } from '@angular/forms';
//import { ActivatedRoute, Params } from '@angular/router';
import ViewOptions from '../models/view-options.model';
import Alerts from '../models/alerts.model';
import Recaptcha from '../models/recaptcha.model';
import ChangePasswordForm from '../models/change-password-form.model';
import Result from '../models/result-data.model';
import PasswordModel from '../models/password.model';
import DialogOverview from '../dialog/app.dialog'

import PasswordValidator from '../helpers/passwordValidator';
import PasswordStrength from '../helpers/passwordStrength';

import 'rxjs/add/operator/map';

const emailRegex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-
zA-Z0-9-]+)*$/;

@Component({
 selector: 'app-root',
 templateUrl: './change-password.html',
 styleUrls: ['./app.change-password.css']
})
export default class ChangePasswordComponent implements OnInit {
 // Form Controls
 FormGroup = new FormGroup({
   username: new FormControl('', [Validators.required, Validators.pattern
(emailRegex)]),
   currentPassword: new FormControl('', [Validators.required]),
   newPassword: new FormControl('', [Validators.required]),
   newPasswordVerify: new FormControl('', [Validators.required])
 }, PasswordValidator.MatchPassword);
 // Variables
 ViewOptions: ViewOptions;
 ResultData: Result;
 Loading: boolean = false;
 ErrorAlertMessage: string = '';
 FormData: PasswordModel;
 color: string = 'warn';
 value: number = 0;



 constructor(private http: Http, private snackBar: MatSnackBar,
   private titleService: Title, public dialog: MatDialog) {
   this.FormData = new PasswordModel;
   this.ViewOptions = new ViewOptions;
   this.ViewOptions.alerts = new Alerts;
   this.ViewOptions.recaptcha = new Recaptcha;
   this.ViewOptions.changePasswordForm = new ChangePasswordForm;

   this.FormGroup.valueChanges.subscribe(data => {
     if (data.newPassword != null)
       this.changeProgressBar(PasswordStrength.measureStrength
(data.newPassword));
   });
 }

 ngOnInit(): void {
    // If I set this it works needs to be dynamic and from the URL
    this.GetData("TestUser");
 }

private GetData(queryParam: string): void {
     this.FormData.Username = queryParam;
     this.http.get('api/password?emp='+ queryParam).subscribe(values => {
     this.ViewOptions = values.json();
     this.titleService.setTitle(this.ViewOptions.changePasswordTitle + " -
" + this.ViewOptions.applicationTitle);

     if (this.ViewOptions.recaptcha.isEnabled) {
       this.FormGroup.addControl('reCaptcha', new FormControl('',
[Validators.required]));
       const sp = document.createElement('script');
       sp.type = 'text/javascript';
       sp.async = true;
       sp.defer = true;
       sp.src =
'https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit&hl='
+ this.ViewOptions.recaptcha.languageCode;
     }
   });
 }

change-pass.html

                           <input matInput [(ngModel)]="FormData.Username"
formControlName="username" name="Username" type="email" required
placeholder="{{ViewOptions.changePasswordForm.usernamePlaceholder}}">

score 1 · Accepted Answer · answered Feb 26 '18 at 13:57

1

Try the following

import {ActivatedRoute} from '@angular/router';
......
export default class ChangePasswordComponent implements OnInit{
.......
//define the ActivatedRoute instance on your constructor
constructor(.......
             private route: ActivatedRoute)

........
 ngOnInit(){
  let paramValue;      
        this.route.queryParams.subscribe((params)=>{
   paramValue = params['paramName'];
});

console.log(paramValue); // this should contain your URL parameter       
}
.....
}

answered Feb 26 '18 at 13:57

likinM

314
3
9

As mentioned above I tried using ActivatedRoute with no success. I get this issue Error: No provider for ActivatedRoute! Stack trace: injectionError http://localhost:7000/vendor.bundle.js:48017:90 noProviderError http://localhost:7000/vendor.bundle.js:48055:12 @Nikil Mathew – Snowman08 Feb 26 '18 at 14:06
Are you defining your routes in app.module.ts ? If not , take a look at this https://angular.io/guide/router. – likinM Feb 26 '18 at 14:35
Also this https://stackoverflow.com/questions/38942817/no-provider-for-activatedroute-angular-2-rc5 might help as well. – likinM Feb 26 '18 at 14:36

Get param from URL with c# send to angular side

1 Answers1