Changing values of a counter variable in Angular

Question

I have 2 buttons on my login page, Button1 and Button2. Both the buttons direct to the same URL page. But on clicking Button 2, I want to disable the functionality of Button 3 which is on the next URL page.

Button 3 should be accessed only when Button 1 was clicked on the main page.

Here's the HTML code of the main page. Button 1 is a part of the ngForm.

<button class="btn btn-primary" id="alert" type="submit">Login</button>
<button class="btn-primary" routerLink="/login/olduser" id="logins">Patient Login</button>

Here's the HTML code of Second page.

 <button class="btn btn-primary" style ='margin-left: 700px;'routerLink="../../login/newuser">Register a new patient </button>

One possible solution I thought of was exporting a counter variable from the main page to the second page on clicking Button 2, which will inform to disable Button 3, but I failed to do so. How can I implement this functionality?

Here's what I have tried till now :

 <button class="btn-primary"  (Click)="newUser()" id="logins">Patient Login</button>

 
 public newUser(){
var status="success";
console.log(status);
this.router.navigateByUrl('/login/olduser');
  }

I'm trying to print the value of "status" on console, to check if the method is being accessed but there's no output on console and also the url doesn't change.

I want to call this "status" variable in olduser.ts script.

Ivan Kashtanov · Accepted Answer · 2019-11-17 14:12:14Z

2

It seems you're trying to limit the functionality of some sort of dashboard depending on user type (patient, non-patient).

I don't think you should rely on a referrer button at all here.

I'd send something like a list of permissions for user to client app after logging in and wrap it in a AuthorizationService of some kind. Then I'd check if the user has the permission to register a new patient and show/hide the corresponding button.

Of course, you shouldn't forget about server-side validation for registration requests.

UPD: if one of the user types doesn't distinguish between users and doesn't require server-side authentication, you can just generate some kind of default set of permissions in the service for those non-privileged users and keep the display logic for page 2 based on permission checks.

edited Nov 17, 2019 at 14:12

answered Nov 16, 2019 at 12:34

Ivan Kashtanov

7045 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akhilesh Pothuri Over a year ago

But the problem here is that, non-patient doesn't have any credentials to access the next page. It's just a direct button click to access the next page. So in this case, how can we use AuthorizationService?

Akhilesh Pothuri Over a year ago

I have appended some more information to the question, please have a look at it

LALIT KANTA DIBYADARSHAN · Accepted Answer · 2019-11-16 16:46:05Z

1

On Click of button pass a query parameter. Then on the next page read the value of the query parameter from URL and disable the button 3 based on the value.

Working Demo

Homepage HTML

<a routerLink='/page1' [queryParams]="{button: 'a'}"><button>button 1</button></a>
<a routerLink='/page1' [queryParams]="{button: 'b'}"><button>button 2 </button></a>
<router-outlet></router-outlet>

In the routed component .TS

import { Component, Input, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
  selector: "hello",
  template: `
    <h1>Hello {{ name }}!</h1>
    <button [disabled]="isDisable">button3</button>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent implements OnInit {
  @Input() name: string;
  isDisable: boolean;
  constructor(private activatedRoute: ActivatedRoute) {}
  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      this.isDisable = params.button === "a";
    });
  }
}

edited Nov 16, 2019 at 16:46

answered Nov 16, 2019 at 16:28

LALIT KANTA DIBYADARSHAN

7534 silver badges10 bronze badges

1 Comment

Roddy of the Frozen Peas Over a year ago

Please include your code in the answer itself not on a external site which may stop working.

Shivaay · Accepted Answer · 2019-11-16 16:01:46Z

1

You can send the state of the button as a query parameter on button 2 click. Now, On the new page get the query params value and then apply property binding.

On Button 2 click :

this.router.navigate(['/newpage'], { queryParams: { state: "false"});

Now, on new page add as below :

import { ActivatedRoute } from '@angular/router'

export class newPage implements OnInit {

btnState

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.route.queryParams
      .filter(params => params.state)
      .subscribe(params => {
            this.btnState = params
      });
}

Now,apply property binding to the button

<button [disabled]="btnState">Button3</button>

answered Nov 16, 2019 at 16:01

Shivaay

613 silver badges10 bronze badges

Comments

Wandrille · Accepted Answer · 2019-11-16 12:33:55Z

0

There is multiple ways to achieve what you try to do:

With the click on Button 2, you can store in a service, a variable isActive to false and in your next url/Component, check from the service the variable to disabled or not your Button 3.
Navigate to your url with a params: my-new-url?ACTIVE=false, and in your new url/component, check the url to find the Params and disable your button according to the value

answered Nov 16, 2019 at 12:33

Wandrille

6,9274 gold badges27 silver badges46 bronze badges

2 Comments

Akhilesh Pothuri Over a year ago

Can you share the working demo snippet as I am unable to properly understand your solution.

Akhilesh Pothuri Over a year ago

I have appended some more information to the question, please have a look at it

Collectives™ on Stack Overflow

Changing values of a counter variable in Angular

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related