Disable router navigate link based on conditions

Question

How can I disable the router.navigate or the link, based on a status?

If the status is a "No" then i can't type the link to edit the Materials?

HTML

<button type="button" (click)="onEditMaterial(material.id)">Edit </button>

TS

onEditMaterial(material_id) {
  this.router.navigate(['materials', material_id, 'edit']);
}

Need more info. It's not clear from description what you want to do. — iamandrewluca, Dec 02 '17 at 22:13
Improve formatting of title and removed unnecessary formatting — Eldelshell, Dec 03 '17 at 11:58
Possible duplicate of [Disable button in angular 2 with two conditions](https://stackoverflow.com/questions/43534347/disable-button-in-angular-2-with-two-conditions) — DrNio, Dec 05 '17 at 10:26

DrNio · Answer 1 · 2017-11-28T08:15:49.227

-1

<button [attr.disable]="status === 'No'">click me</button> .status is a string in your angular component. <button [disable]="status === 'No'">click me</button> syntax.

Edit: disable attribute is a HTML5 attribute used for <input> , <button> etc. You can make it look nicer for better UX with some css as well like this: button:disabled {cursor: not-allowed;}

Edit: another way is something like this

onEditMaterial(material_id) {
    if (this.status === 'No') return; // if the status is 'No' don't do anything

    this.router.navigate(['materials', material_id, 'edit']);
  }

edited Nov 28 '17 at 08:15

answered Nov 27 '17 at 23:14

DrNio

1,936
1
19
25

My problem if the api has given the status? How can i declare it? – Joseph Nov 27 '17 at 23:41
have a `status` property in the component `public status: string = ''`. Then after you do the `this.http.get(...).toPromise().then((data)=>{//check here the status of the response and change the state of the status to this.status = some_value)` - you can past the code of the service you are talking about – DrNio Nov 27 '17 at 23:45
Can you this instead? – Joseph Nov 27 '17 at 23:50
sure..if `mat_status` is the property that changes – DrNio Nov 27 '17 at 23:55
But why if my mat_status is yes, the button is always disabled?? – Joseph Nov 27 '17 at 23:56
`` - it means if `mat_status` is 'No' disabled it – DrNio Nov 27 '17 at 23:58
How about if mat_status is not equals to No? – Joseph Nov 27 '17 at 23:59
then it's not going to be disabled – DrNio Nov 27 '17 at 23:59
How can i write if mat_status is not equals to No? – Joseph Nov 28 '17 at 00:00
check this online example https://jsfiddle.net/gjvdx37g/ what you are asking is quite simple to be honest – DrNio Nov 28 '17 at 00:02
I did this before and it works. *ngIf="mat_status !== 'No'". But if i convert it to the attr.disabled. All my buttons are disabled? – Joseph Nov 28 '17 at 00:19
only the button that you apply the rule, maybe you missed a `'` or a closing tag – DrNio Nov 28 '17 at 00:20
It doesn't still work. And i can type the link in the url – Joseph Nov 28 '17 at 00:42
I can still type the link in the url. – Joseph Nov 28 '17 at 01:05
Hi, I updated my answer. What you need is quite simple. I would recommend spend some more time going through https://developer.mozilla.org/en-US/ and https://angular.io/ – DrNio Nov 28 '17 at 08:16

gbdcool · Answer 2 · 2017-11-28T05:34:17.733

To disable the button, you can follow the answer provided by DrNio. There based upon the conversation in comment, if you also want to prevent navigation even with changing URL in browser then you need to use Router Guard. Check an example of AuthGuard here: https://angular.io/guide/router#component-less-route-grouping-routes-without-a-component . Search for export class AuthGuard implements CanActivate. You basically need to implement canActivate method.

Disable router navigate link based on conditions

HTML

TS

2 Answers2