title: Navigating to a specific page based on radio button checked in Angular
body: <p>I'm trying to make a simple login app, for both normal users and the admin. I made a working login function, but I want the user to choose whether he's a normal user or an admin. I want to use radio buttons for it. Based on the radio button clicked, after logging in, I want the user to navigate to the respective page. So if the user checked the &quot;user&quot; radio button, I want him to go to the page specifically for users, and if the user checked &quot;admin&quot; radio button, I want him to navigate to the page specifically for admins after logging in.</p>
  <p><a href="https://i.stack.imgur.com/bZ6ad.png" rel="nofollow noreferrer">login</a></p>
  <p>This is a piece of code where the logging in is happening, and the user gets navigated to home for now after loggin in.</p>
  <pre><code>    if(this.checkCredentials(signInData)) {
        this.isAuthenticated = true;
        this.router.navigate(['home']);
        return true;
      }
      this.isAuthenticated = false;
      return false;
    }
  </code></pre>
  <p>This is my HTML code where my radio buttons are</p>
  <pre><code>                    &lt;div class=&quot;custom-control custom-radio&quot;&gt;
                        &lt;input id=&quot;user&quot; name=&quot;usertype&quot; type=&quot;radio&quot; class=&quot;custom-control-input&quot; ng-model=&quot;userischecked&quot;checked required&gt;
                        &lt;label class=&quot;custom-control-label&quot; for=&quot;admin&quot;&gt;User&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;custom-control custom-radio&quot;&gt;
                        &lt;input id=&quot;admin&quot; name=&quot;usertype&quot; type=&quot;radio&quot; class=&quot;custom-control-input&quot; required&gt;
                        &lt;label class=&quot;custom-control-label&quot; for=&quot;admin&quot;&gt;Admin&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;custom-control custom-radio&quot;&gt;
  </code></pre>
  <p>The loggin in happens in the authentication service and the radio buttons are in the login component HTML file, if that helps.</p>
  <p>EDIT: I'm attaching my whole HTML code:</p>
  <pre><code>&lt;div class=&quot;login-wrapper&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
              &lt;form class=&quot;form-signin&quot;  (ngSubmit)=&quot;onSubmit(signInForm)&quot; #signInForm=&quot;ngForm&quot;&gt;
                  &lt;h1 class=&quot;h3 mb-3 font-weight-normal&quot;&gt;Please sign in&lt;/h1&gt;
                  
                  &lt;label for=&quot;inputID&quot; class=&quot;sr-only&quot;&gt;ID&lt;/label&gt;
                  &lt;input type=&quot;id&quot; id=&quot;inputID&quot; name=&quot;id&quot; class=&quot;form-control&quot; 
                  placeholder=&quot;ID&quot; required autofocus ngModel&gt;
                  
                  &lt;label for=&quot;inputPassword&quot; class=&quot;sr-only&quot;&gt;Password&lt;/label&gt;
                  &lt;input type=&quot;password&quot; id=&quot;inputPassword&quot; name=&quot;password&quot; class=&quot;form-control&quot; 
                  placeholder=&quot;Password&quot; required ngModel&gt;
                  
                  &lt;button class=&quot;btn btn-lg btn-primary btn-block&quot; type=&quot;submit&quot;&gt;Sign in&lt;/button&gt;
  
                  &lt;div class=&quot;d-block my-3&quot;&gt;
                      &lt;div class=&quot;custom-control custom-radio&quot;&gt;
                        &lt;input id=&quot;user&quot; name=&quot;usertype&quot; type=&quot;radio&quot; class=&quot;custom-control-input&quot; ng-model=&quot;userischecked&quot;checked required&gt;
                        &lt;label class=&quot;custom-control-label&quot; for=&quot;admin&quot;&gt;User&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;custom-control custom-radio&quot;&gt;
                        &lt;input id=&quot;admin&quot; name=&quot;usertype&quot; type=&quot;radio&quot; class=&quot;custom-control-input&quot; required&gt;
                        &lt;label class=&quot;custom-control-label&quot; for=&quot;admin&quot;&gt;Admin&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;custom-control custom-radio&quot;&gt;
                        
                      &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>