Can I declare a directive within a module and use it only within components in that module?
My Angular (v7) app consists of several modules. I have an AppModule that contains the core parts of the app, and several separate modules that provide rarely-used parts of the app. (I'm not loading these other modules lazily yet, but probably will in the future).
Within one of these modules (let's call it OtherModule), I have both components and directives. The directives are only used by the components in OtherModule. It makes sense (to me) to keep the definition of those directives "encapsulated" within OtherModule.
However, when I try to use one of the components from OtherModule, I get an error if that component uses one of the directives from OtherModule:
Property binding appOther not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations
(in this example, appOther is the directive defined in OtherModule).
You can see all this in action (or not) in this StackBlitz.
I've tried declaring the directive within AppModule, but (a) I don't really want to pollute that module with private details of how OtherModule works, and (b) it then complains that the directive is declared twice.
What am I doing wrong here? It seems like an obvious requirement (and if this separation of concerns isn't possible, then why do we have modules at all?).
angular angular-directive angular-module asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
|
show 2 more comments
My Angular (v7) app consists of several modules. I have an AppModule that contains the core parts of the app, and several separate modules that provide rarely-used parts of the app. (I'm not loading these other modules lazily yet, but probably will in the future).
Within one of these modules (let's call it OtherModule), I have both components and directives. The directives are only used by the components in OtherModule. It makes sense (to me) to keep the definition of those directives "encapsulated" within OtherModule.
However, when I try to use one of the components from OtherModule, I get an error if that component uses one of the directives from OtherModule:
Property binding appOther not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations
(in this example, appOther is the directive defined in OtherModule).
You can see all this in action (or not) in this StackBlitz.
I've tried declaring the directive within AppModule, but (a) I don't really want to pollute that module with private details of how OtherModule works, and (b) it then complains that the directive is declared twice.
What am I doing wrong here? It seems like an obvious requirement (and if this separation of concerns isn't possible, then why do we have modules at all?).
angular angular-directive angular-module asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
It appears to work with<p appOther>(after removing the*). See this stackblitz.
– ConnorsFan
Nov 15 '18 at 15:27
@ConnorsFan: I looks like it works, but actually all that's happened is that it no longer recognizes the attribute as a directive. Try changing the directive name to spellingMistake and it makes no difference in your stackblitz.
– Gary McGill
Nov 15 '18 at 15:33
Try the stackblitz again. I don't know what made you think that it did not work, since the original directive did nothing.
– ConnorsFan
Nov 15 '18 at 15:39
@JanRecker: I'm not sure if that's addressed to me or to ConnorsFan. I'm aware of that - and in fact I'm basically following the advice for creating a structural directive here: angular.io/guide/… where the asterisk is used.
– Gary McGill
Nov 15 '18 at 15:39
@ConnorsFan: wow. I'm glad (and grateful) you got it to work, although I'm confused as to why. Playing with your stackblitz, it seems that you can include the asterisk or not, and include the value or not but not both which is what I had. Weird. Anyway, it seems it's nothing to do with the modules at all, which is where I assumed the problem was. Thanks for your help.
– Gary McGill
Nov 15 '18 at 15:48
|
show 2 more comments
My Angular (v7) app consists of several modules. I have an AppModule that contains the core parts of the app, and several separate modules that provide rarely-used parts of the app. (I'm not loading these other modules lazily yet, but probably will in the future).
Within one of these modules (let's call it OtherModule), I have both components and directives. The directives are only used by the components in OtherModule. It makes sense (to me) to keep the definition of those directives "encapsulated" within OtherModule.
However, when I try to use one of the components from OtherModule, I get an error if that component uses one of the directives from OtherModule:
Property binding appOther not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations
(in this example, appOther is the directive defined in OtherModule).
You can see all this in action (or not) in this StackBlitz.
I've tried declaring the directive within AppModule, but (a) I don't really want to pollute that module with private details of how OtherModule works, and (b) it then complains that the directive is declared twice.
What am I doing wrong here? It seems like an obvious requirement (and if this separation of concerns isn't possible, then why do we have modules at all?).
angular angular-directive angular-module asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
My Angular (v7) app consists of several modules. I have an AppModule that contains the core parts of the app, and several separate modules that provide rarely-used parts of the app. (I'm not loading these other modules lazily yet, but probably will in the future).
Within one of these modules (let's call it OtherModule), I have both components and directives. The directives are only used by the components in OtherModule. It makes sense (to me) to keep the definition of those directives "encapsulated" within OtherModule.
However, when I try to use one of the components from OtherModule, I get an error if that component uses one of the directives from OtherModule:
Property binding appOther not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations
(in this example, appOther is the directive defined in OtherModule).
You can see all this in action (or not) in this StackBlitz.
I've tried declaring the directive within AppModule, but (a) I don't really want to pollute that module with private details of how OtherModule works, and (b) it then complains that the directive is declared twice.
What am I doing wrong here? It seems like an obvious requirement (and if this separation of concerns isn't possible, then why do we have modules at all?).
angular angular-directive angular-module angular angular-directive angular-module asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
asked Nov 15 '18 at 15:20
Gary McGillGary McGill
16.5k1990161
16.5k1990161
It appears to work with<p appOther>(after removing the*). See this stackblitz.
– ConnorsFan
Nov 15 '18 at 15:27
@ConnorsFan: I looks like it works, but actually all that's happened is that it no longer recognizes the attribute as a directive. Try changing the directive name to spellingMistake and it makes no difference in your stackblitz.
– Gary McGill
Nov 15 '18 at 15:33
Try the stackblitz again. I don't know what made you think that it did not work, since the original directive did nothing.
– ConnorsFan
Nov 15 '18 at 15:39
@JanRecker: I'm not sure if that's addressed to me or to ConnorsFan. I'm aware of that - and in fact I'm basically following the advice for creating a structural directive here: angular.io/guide/… where the asterisk is used.
– Gary McGill
Nov 15 '18 at 15:39
@ConnorsFan: wow. I'm glad (and grateful) you got it to work, although I'm confused as to why. Playing with your stackblitz, it seems that you can include the asterisk or not, and include the value or not but not both which is what I had. Weird. Anyway, it seems it's nothing to do with the modules at all, which is where I assumed the problem was. Thanks for your help.
– Gary McGill
Nov 15 '18 at 15:48
|
show 2 more comments
It appears to work with<p appOther>(after removing the*). See this stackblitz.
– ConnorsFan
Nov 15 '18 at 15:27
@ConnorsFan: I looks like it works, but actually all that's happened is that it no longer recognizes the attribute as a directive. Try changing the directive name to spellingMistake and it makes no difference in your stackblitz.
– Gary McGill
Nov 15 '18 at 15:33
Try the stackblitz again. I don't know what made you think that it did not work, since the original directive did nothing.
– ConnorsFan
Nov 15 '18 at 15:39
@JanRecker: I'm not sure if that's addressed to me or to ConnorsFan. I'm aware of that - and in fact I'm basically following the advice for creating a structural directive here: angular.io/guide/… where the asterisk is used.
– Gary McGill
Nov 15 '18 at 15:39
@ConnorsFan: wow. I'm glad (and grateful) you got it to work, although I'm confused as to why. Playing with your stackblitz, it seems that you can include the asterisk or not, and include the value or not but not both which is what I had. Weird. Anyway, it seems it's nothing to do with the modules at all, which is where I assumed the problem was. Thanks for your help.
– Gary McGill
Nov 15 '18 at 15:48
It appears to work with
<p appOther> (after removing the *). See this stackblitz.– ConnorsFan
Nov 15 '18 at 15:27
It appears to work with
<p appOther> (after removing the *). See this stackblitz.– ConnorsFan
Nov 15 '18 at 15:27
@ConnorsFan: I looks like it works, but actually all that's happened is that it no longer recognizes the attribute as a directive. Try changing the directive name to spellingMistake and it makes no difference in your stackblitz.
– Gary McGill
Nov 15 '18 at 15:33
@ConnorsFan: I looks like it works, but actually all that's happened is that it no longer recognizes the attribute as a directive. Try changing the directive name to spellingMistake and it makes no difference in your stackblitz.
– Gary McGill
Nov 15 '18 at 15:33
Try the stackblitz again. I don't know what made you think that it did not work, since the original directive did nothing.
– ConnorsFan
Nov 15 '18 at 15:39
Try the stackblitz again. I don't know what made you think that it did not work, since the original directive did nothing.
– ConnorsFan
Nov 15 '18 at 15:39
@JanRecker: I'm not sure if that's addressed to me or to ConnorsFan. I'm aware of that - and in fact I'm basically following the advice for creating a structural directive here: angular.io/guide/… where the asterisk is used.
– Gary McGill
Nov 15 '18 at 15:39
@JanRecker: I'm not sure if that's addressed to me or to ConnorsFan. I'm aware of that - and in fact I'm basically following the advice for creating a structural directive here: angular.io/guide/… where the asterisk is used.
– Gary McGill
Nov 15 '18 at 15:39
@ConnorsFan: wow. I'm glad (and grateful) you got it to work, although I'm confused as to why. Playing with your stackblitz, it seems that you can include the asterisk or not, and include the value or not but not both which is what I had. Weird. Anyway, it seems it's nothing to do with the modules at all, which is where I assumed the problem was. Thanks for your help.
– Gary McGill
Nov 15 '18 at 15:48
@ConnorsFan: wow. I'm glad (and grateful) you got it to work, although I'm confused as to why. Playing with your stackblitz, it seems that you can include the asterisk or not, and include the value or not but not both which is what I had. Weird. Anyway, it seems it's nothing to do with the modules at all, which is where I assumed the problem was. Thanks for your help.
– Gary McGill
Nov 15 '18 at 15:48
|
show 2 more comments
1 Answer
1
active
oldest
votes
taking a look at your implementation I think that you have to remove de * and the ="true" and leave only the selector appOther
Just like that:
<p appOther>
The module declaration is OK, you are declaring properly the directive in OtherModule and not exporting them, you can't to declare it in AppModule too. If in other situation you want to share that directive, you should declare it in a shared module which will
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
1
Thanks. This is also what ConnorsFan suggested - and actually it seems that *appOther and appOther="true" both work, but not *appOther="true". Anyway, the main point is that it's nothing to do with the modules which is what I was hung up on.
– Gary McGill
Nov 15 '18 at 15:50
Great @Gary McGill, glad to know that now it's working, and yes it seems that one of them works but not both together. But yes, the main point is that, that's why I included the second paragraph ;)
– Octavio Garbarino
Nov 15 '18 at 16:50
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%2f53322585%2fcan-i-declare-a-directive-within-a-module-and-use-it-only-within-components-in-t%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
taking a look at your implementation I think that you have to remove de * and the ="true" and leave only the selector appOther
Just like that:
<p appOther>
The module declaration is OK, you are declaring properly the directive in OtherModule and not exporting them, you can't to declare it in AppModule too. If in other situation you want to share that directive, you should declare it in a shared module which will
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
1
Thanks. This is also what ConnorsFan suggested - and actually it seems that *appOther and appOther="true" both work, but not *appOther="true". Anyway, the main point is that it's nothing to do with the modules which is what I was hung up on.
– Gary McGill
Nov 15 '18 at 15:50
Great @Gary McGill, glad to know that now it's working, and yes it seems that one of them works but not both together. But yes, the main point is that, that's why I included the second paragraph ;)
– Octavio Garbarino
Nov 15 '18 at 16:50
add a comment |
taking a look at your implementation I think that you have to remove de * and the ="true" and leave only the selector appOther
Just like that:
<p appOther>
The module declaration is OK, you are declaring properly the directive in OtherModule and not exporting them, you can't to declare it in AppModule too. If in other situation you want to share that directive, you should declare it in a shared module which will
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
1
Thanks. This is also what ConnorsFan suggested - and actually it seems that *appOther and appOther="true" both work, but not *appOther="true". Anyway, the main point is that it's nothing to do with the modules which is what I was hung up on.
– Gary McGill
Nov 15 '18 at 15:50
Great @Gary McGill, glad to know that now it's working, and yes it seems that one of them works but not both together. But yes, the main point is that, that's why I included the second paragraph ;)
– Octavio Garbarino
Nov 15 '18 at 16:50
add a comment |
taking a look at your implementation I think that you have to remove de * and the ="true" and leave only the selector appOther
Just like that:
<p appOther>
The module declaration is OK, you are declaring properly the directive in OtherModule and not exporting them, you can't to declare it in AppModule too. If in other situation you want to share that directive, you should declare it in a shared module which will
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
taking a look at your implementation I think that you have to remove de * and the ="true" and leave only the selector appOther
Just like that:
<p appOther>
The module declaration is OK, you are declaring properly the directive in OtherModule and not exporting them, you can't to declare it in AppModule too. If in other situation you want to share that directive, you should declare it in a shared module which will
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
answered Nov 15 '18 at 15:37
Octavio GarbarinoOctavio Garbarino
472512
472512
1
Thanks. This is also what ConnorsFan suggested - and actually it seems that *appOther and appOther="true" both work, but not *appOther="true". Anyway, the main point is that it's nothing to do with the modules which is what I was hung up on.
– Gary McGill
Nov 15 '18 at 15:50
Great @Gary McGill, glad to know that now it's working, and yes it seems that one of them works but not both together. But yes, the main point is that, that's why I included the second paragraph ;)
– Octavio Garbarino
Nov 15 '18 at 16:50
add a comment |
1
Thanks. This is also what ConnorsFan suggested - and actually it seems that *appOther and appOther="true" both work, but not *appOther="true". Anyway, the main point is that it's nothing to do with the modules which is what I was hung up on.
– Gary McGill
Nov 15 '18 at 15:50
Great @Gary McGill, glad to know that now it's working, and yes it seems that one of them works but not both together. But yes, the main point is that, that's why I included the second paragraph ;)
– Octavio Garbarino
Nov 15 '18 at 16:50
1
1
Thanks. This is also what ConnorsFan suggested - and actually it seems that *appOther and appOther="true" both work, but not *appOther="true". Anyway, the main point is that it's nothing to do with the modules which is what I was hung up on.
– Gary McGill
Nov 15 '18 at 15:50
Thanks. This is also what ConnorsFan suggested - and actually it seems that *appOther and appOther="true" both work, but not *appOther="true". Anyway, the main point is that it's nothing to do with the modules which is what I was hung up on.
– Gary McGill
Nov 15 '18 at 15:50
Great @Gary McGill, glad to know that now it's working, and yes it seems that one of them works but not both together. But yes, the main point is that, that's why I included the second paragraph ;)
– Octavio Garbarino
Nov 15 '18 at 16:50
Great @Gary McGill, glad to know that now it's working, and yes it seems that one of them works but not both together. But yes, the main point is that, that's why I included the second paragraph ;)
– Octavio Garbarino
Nov 15 '18 at 16:50
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%2f53322585%2fcan-i-declare-a-directive-within-a-module-and-use-it-only-within-components-in-t%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
It appears to work with
<p appOther>(after removing the*). See this stackblitz.– ConnorsFan
Nov 15 '18 at 15:27
@ConnorsFan: I looks like it works, but actually all that's happened is that it no longer recognizes the attribute as a directive. Try changing the directive name to spellingMistake and it makes no difference in your stackblitz.
– Gary McGill
Nov 15 '18 at 15:33
Try the stackblitz again. I don't know what made you think that it did not work, since the original directive did nothing.
– ConnorsFan
Nov 15 '18 at 15:39
@JanRecker: I'm not sure if that's addressed to me or to ConnorsFan. I'm aware of that - and in fact I'm basically following the advice for creating a structural directive here: angular.io/guide/… where the asterisk is used.
– Gary McGill
Nov 15 '18 at 15:39
@ConnorsFan: wow. I'm glad (and grateful) you got it to work, although I'm confused as to why. Playing with your stackblitz, it seems that you can include the asterisk or not, and include the value or not but not both which is what I had. Weird. Anyway, it seems it's nothing to do with the modules at all, which is where I assumed the problem was. Thanks for your help.
– Gary McGill
Nov 15 '18 at 15:48