Mixing
Custom Directive and override another directive
I am working on angular 6 and I have a problem with my directive.
What I tried to do is implement a directive that would be able to set the value of element's disable attribute.
For example I could have
@Directive({
selector: '[permission]'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(
private userServ: UserService,
private element: ElementRef,
) {
}
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
this.updateView();
}
updateView() {
this.element.nativeElement.disabled = this.checkPermission();
}
checkPermission() {
return permission.every(elm => this.userPermission.includes(elm));
}
}
And in the template I would have something like this in a simple case
<button [permission]="['permission1','permission2']">Confirm</button>
But unfortunately I have cases where I could have something like this already in the template :
<button [disabled]="form.controls.pwd.errors" [permission]="['permission1','permission2']">Confirm</button>
The problem here is that I would like my custom directive to have priority to set the disable attribute to false or true.
What is happening is that when the field become valid, when form.controls.pwd.errors become 'true' my custom directive 'permission' which set disable to false is useless here.
So do you have any idea on how I could do this, having a custom directive overriding the built-in directive provided by angular ?
angular asked Jan 2 at 16:16
kavindkavind
919
add a comment |
I am working on angular 6 and I have a problem with my directive.
What I tried to do is implement a directive that would be able to set the value of element's disable attribute.
For example I could have
@Directive({
selector: '[permission]'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(
private userServ: UserService,
private element: ElementRef,
) {
}
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
this.updateView();
}
updateView() {
this.element.nativeElement.disabled = this.checkPermission();
}
checkPermission() {
return permission.every(elm => this.userPermission.includes(elm));
}
}
And in the template I would have something like this in a simple case
<button [permission]="['permission1','permission2']">Confirm</button>
But unfortunately I have cases where I could have something like this already in the template :
<button [disabled]="form.controls.pwd.errors" [permission]="['permission1','permission2']">Confirm</button>
The problem here is that I would like my custom directive to have priority to set the disable attribute to false or true.
What is happening is that when the field become valid, when form.controls.pwd.errors become 'true' my custom directive 'permission' which set disable to false is useless here.
So do you have any idea on how I could do this, having a custom directive overriding the built-in directive provided by angular ?
angular asked Jan 2 at 16:16
kavindkavind
919
add a comment |
I am working on angular 6 and I have a problem with my directive.
What I tried to do is implement a directive that would be able to set the value of element's disable attribute.
For example I could have
@Directive({
selector: '[permission]'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(
private userServ: UserService,
private element: ElementRef,
) {
}
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
this.updateView();
}
updateView() {
this.element.nativeElement.disabled = this.checkPermission();
}
checkPermission() {
return permission.every(elm => this.userPermission.includes(elm));
}
}
And in the template I would have something like this in a simple case
<button [permission]="['permission1','permission2']">Confirm</button>
But unfortunately I have cases where I could have something like this already in the template :
<button [disabled]="form.controls.pwd.errors" [permission]="['permission1','permission2']">Confirm</button>
The problem here is that I would like my custom directive to have priority to set the disable attribute to false or true.
What is happening is that when the field become valid, when form.controls.pwd.errors become 'true' my custom directive 'permission' which set disable to false is useless here.
So do you have any idea on how I could do this, having a custom directive overriding the built-in directive provided by angular ?
angular asked Jan 2 at 16:16
kavindkavind
919
I am working on angular 6 and I have a problem with my directive.
What I tried to do is implement a directive that would be able to set the value of element's disable attribute.
For example I could have
@Directive({
selector: '[permission]'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(
private userServ: UserService,
private element: ElementRef,
) {
}
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
this.updateView();
}
updateView() {
this.element.nativeElement.disabled = this.checkPermission();
}
checkPermission() {
return permission.every(elm => this.userPermission.includes(elm));
}
}
And in the template I would have something like this in a simple case
<button [permission]="['permission1','permission2']">Confirm</button>
But unfortunately I have cases where I could have something like this already in the template :
<button [disabled]="form.controls.pwd.errors" [permission]="['permission1','permission2']">Confirm</button>
The problem here is that I would like my custom directive to have priority to set the disable attribute to false or true.
What is happening is that when the field become valid, when form.controls.pwd.errors become 'true' my custom directive 'permission' which set disable to false is useless here.
So do you have any idea on how I could do this, having a custom directive overriding the built-in directive provided by angular ?
angular angular asked Jan 2 at 16:16
kavindkavind
919
asked Jan 2 at 16:16
kavindkavind
919
asked Jan 2 at 16:16
kavindkavind
919
asked Jan 2 at 16:16
kavindkavind
919
asked Jan 2 at 16:16
kavindkavind
919
919
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can export the directive so that you can use it in the template directly. This has the advantage that you can write expressions and also use permission logic in the templates.
Here is an updated example, and I've removed the setting of the disabled attribute. You control how you want the disabled attribute set in the template.
@Directive({
selector: '[permission]',
exportAs: 'permission'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(private userServ: UserService) { }
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
}
deny() {
return this.permission.every(elm => this.userPermission.includes(elm));
}
}
You can now bind the directive to a template variable as follows:
<button #perm="permission"
[disabled]="perm.deny()"
[permission]="['permission1','permission2']">Confirm</button>
Furthermore, you could bind attributes in your template to that template variable like this:
<button #perm="permission"
[disabled]="perm.deny() || form.controls.pwd.errors"
[permission]="['permission1','permission2']">Confirm</button>
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
Thanks a lot, it works as intended, I clearly miss the part with the 'exportAs' attribute
– kavind
Jan 3 at 8:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009652%2fcustom-directive-and-override-another-directive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can export the directive so that you can use it in the template directly. This has the advantage that you can write expressions and also use permission logic in the templates.
Here is an updated example, and I've removed the setting of the disabled attribute. You control how you want the disabled attribute set in the template.
@Directive({
selector: '[permission]',
exportAs: 'permission'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(private userServ: UserService) { }
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
}
deny() {
return this.permission.every(elm => this.userPermission.includes(elm));
}
}
You can now bind the directive to a template variable as follows:
<button #perm="permission"
[disabled]="perm.deny()"
[permission]="['permission1','permission2']">Confirm</button>
Furthermore, you could bind attributes in your template to that template variable like this:
<button #perm="permission"
[disabled]="perm.deny() || form.controls.pwd.errors"
[permission]="['permission1','permission2']">Confirm</button>
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
Thanks a lot, it works as intended, I clearly miss the part with the 'exportAs' attribute
– kavind
Jan 3 at 8:03
add a comment |
You can export the directive so that you can use it in the template directly. This has the advantage that you can write expressions and also use permission logic in the templates.
Here is an updated example, and I've removed the setting of the disabled attribute. You control how you want the disabled attribute set in the template.
@Directive({
selector: '[permission]',
exportAs: 'permission'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(private userServ: UserService) { }
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
}
deny() {
return this.permission.every(elm => this.userPermission.includes(elm));
}
}
You can now bind the directive to a template variable as follows:
<button #perm="permission"
[disabled]="perm.deny()"
[permission]="['permission1','permission2']">Confirm</button>
Furthermore, you could bind attributes in your template to that template variable like this:
<button #perm="permission"
[disabled]="perm.deny() || form.controls.pwd.errors"
[permission]="['permission1','permission2']">Confirm</button>
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
Thanks a lot, it works as intended, I clearly miss the part with the 'exportAs' attribute
– kavind
Jan 3 at 8:03
add a comment |
You can export the directive so that you can use it in the template directly. This has the advantage that you can write expressions and also use permission logic in the templates.
Here is an updated example, and I've removed the setting of the disabled attribute. You control how you want the disabled attribute set in the template.
@Directive({
selector: '[permission]',
exportAs: 'permission'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(private userServ: UserService) { }
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
}
deny() {
return this.permission.every(elm => this.userPermission.includes(elm));
}
}
You can now bind the directive to a template variable as follows:
<button #perm="permission"
[disabled]="perm.deny()"
[permission]="['permission1','permission2']">Confirm</button>
Furthermore, you could bind attributes in your template to that template variable like this:
<button #perm="permission"
[disabled]="perm.deny() || form.controls.pwd.errors"
[permission]="['permission1','permission2']">Confirm</button>
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
You can export the directive so that you can use it in the template directly. This has the advantage that you can write expressions and also use permission logic in the templates.
Here is an updated example, and I've removed the setting of the disabled attribute. You control how you want the disabled attribute set in the template.
@Directive({
selector: '[permission]',
exportAs: 'permission'
})
export class PermissionDirective implements OnInit {
private userPermission: string;
@Input() permission: string;
constructor(private userServ: UserService) { }
ngOnInit() {
this.userPermission = this.userServ.getUserPermissions();
}
deny() {
return this.permission.every(elm => this.userPermission.includes(elm));
}
}
You can now bind the directive to a template variable as follows:
<button #perm="permission"
[disabled]="perm.deny()"
[permission]="['permission1','permission2']">Confirm</button>
Furthermore, you could bind attributes in your template to that template variable like this:
<button #perm="permission"
[disabled]="perm.deny() || form.controls.pwd.errors"
[permission]="['permission1','permission2']">Confirm</button>
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
edited Jan 2 at 16:50
Jota.Toledo
11.2k62450
11.2k62450
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
answered Jan 2 at 16:29
cgTagcgTag
24.3k864114
24.3k864114
Thanks a lot, it works as intended, I clearly miss the part with the 'exportAs' attribute
– kavind
Jan 3 at 8:03
add a comment |
Thanks a lot, it works as intended, I clearly miss the part with the 'exportAs' attribute
– kavind
Jan 3 at 8:03
Thanks a lot, it works as intended, I clearly miss the part with the 'exportAs' attribute
– kavind
Jan 3 at 8:03
Thanks a lot, it works as intended, I clearly miss the part with the 'exportAs' attribute
– kavind
Jan 3 at 8:03
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009652%2fcustom-directive-and-override-another-directive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
