How to use custom directive with ng-template and ngIf?
I need to generate a component dynamically. I followed this tutorial of Dynamic Component Loader. The problem is that I use *ngIf directive in my template. Now I'm stuck at the following error in my AdBannerComponent:
TypeError: "this.adHost is undefined"
The code from the tutorial is provided on stackblitz.
Here is the code of my AdBannerComponent template:
<div *ngIf="flag">
<h3>Advertisements {{flag.name}}:</h3>
<ng-template ad-host></ng-template>
</div>
How should I use ng-template to display generated component with ngIf directive?
angular
asked Nov 23 '18 at 13:14
FILFIL
7041818
add a comment |
I need to generate a component dynamically. I followed this tutorial of Dynamic Component Loader. The problem is that I use *ngIf directive in my template. Now I'm stuck at the following error in my AdBannerComponent:
TypeError: "this.adHost is undefined"
The code from the tutorial is provided on stackblitz.
Here is the code of my AdBannerComponent template:
<div *ngIf="flag">
<h3>Advertisements {{flag.name}}:</h3>
<ng-template ad-host></ng-template>
</div>
How should I use ng-template to display generated component with ngIf directive?
angular
asked Nov 23 '18 at 13:14
FILFIL
7041818
Couldn't find*ngIfanywhere in your Template.
– SiddAjmera
Nov 23 '18 at 13:29
add a comment |
I need to generate a component dynamically. I followed this tutorial of Dynamic Component Loader. The problem is that I use *ngIf directive in my template. Now I'm stuck at the following error in my AdBannerComponent:
TypeError: "this.adHost is undefined"
The code from the tutorial is provided on stackblitz.
Here is the code of my AdBannerComponent template:
<div *ngIf="flag">
<h3>Advertisements {{flag.name}}:</h3>
<ng-template ad-host></ng-template>
</div>
How should I use ng-template to display generated component with ngIf directive?
angular
asked Nov 23 '18 at 13:14
FILFIL
7041818
I need to generate a component dynamically. I followed this tutorial of Dynamic Component Loader. The problem is that I use *ngIf directive in my template. Now I'm stuck at the following error in my AdBannerComponent:
TypeError: "this.adHost is undefined"
The code from the tutorial is provided on stackblitz.
Here is the code of my AdBannerComponent template:
<div *ngIf="flag">
<h3>Advertisements {{flag.name}}:</h3>
<ng-template ad-host></ng-template>
</div>
How should I use ng-template to display generated component with ngIf directive?
angular
angular
asked Nov 23 '18 at 13:14
FILFIL
7041818
asked Nov 23 '18 at 13:14
FILFIL
7041818
edited Nov 23 '18 at 14:49
FIL
asked Nov 23 '18 at 13:14
FILFIL
7041818
asked Nov 23 '18 at 13:14
FILFIL
7041818
asked Nov 23 '18 at 13:14
FILFIL
7041818
7041818
Couldn't find*ngIfanywhere in your Template.
– SiddAjmera
Nov 23 '18 at 13:29
add a comment |
Couldn't find*ngIfanywhere in your Template.
– SiddAjmera
Nov 23 '18 at 13:29
Couldn't find
*ngIf anywhere in your Template.– SiddAjmera
Nov 23 '18 at 13:29
Couldn't find
*ngIf anywhere in your Template.– SiddAjmera
Nov 23 '18 at 13:29
add a comment |
1 Answer
1
active
oldest
votes
This is because of you have used view child. If you want to use viewchild the component should be rendered as a child component. but with *ngIf it is conditionally rendered. so you can use display:none style instead of *ngIf. display:none only change the visibility.
please refer this link for understand about *ngIf vs display:none
Your edited demo
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
Ok, but what if I want to usengIf? How to render the component?
– FIL
Nov 23 '18 at 13:40
You cant with viewchild. Viewchild is a refrence of the rendered component.if there is no component it is throwing error.*ngIf doing conditionally rendering.that link which I put shows the differences.
– Asanka
Nov 23 '18 at 13:43
Theflagvalue will be received from my API, so withngIfI could avoid errorflag is undefined.
– FIL
Nov 23 '18 at 14:04
Do you want to avoid flag undefined error?
– Asanka
Nov 23 '18 at 14:06
Ifdisplay: noneis the only way... yes.
– FIL
Nov 23 '18 at 14:07
|
show 2 more comments
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%2f53447419%2fhow-to-use-custom-directive-with-ng-template-and-ngif%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
This is because of you have used view child. If you want to use viewchild the component should be rendered as a child component. but with *ngIf it is conditionally rendered. so you can use display:none style instead of *ngIf. display:none only change the visibility.
please refer this link for understand about *ngIf vs display:none
Your edited demo
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
Ok, but what if I want to usengIf? How to render the component?
– FIL
Nov 23 '18 at 13:40
You cant with viewchild. Viewchild is a refrence of the rendered component.if there is no component it is throwing error.*ngIf doing conditionally rendering.that link which I put shows the differences.
– Asanka
Nov 23 '18 at 13:43
Theflagvalue will be received from my API, so withngIfI could avoid errorflag is undefined.
– FIL
Nov 23 '18 at 14:04
Do you want to avoid flag undefined error?
– Asanka
Nov 23 '18 at 14:06
Ifdisplay: noneis the only way... yes.
– FIL
Nov 23 '18 at 14:07
|
show 2 more comments
This is because of you have used view child. If you want to use viewchild the component should be rendered as a child component. but with *ngIf it is conditionally rendered. so you can use display:none style instead of *ngIf. display:none only change the visibility.
please refer this link for understand about *ngIf vs display:none
Your edited demo
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
Ok, but what if I want to usengIf? How to render the component?
– FIL
Nov 23 '18 at 13:40
You cant with viewchild. Viewchild is a refrence of the rendered component.if there is no component it is throwing error.*ngIf doing conditionally rendering.that link which I put shows the differences.
– Asanka
Nov 23 '18 at 13:43
Theflagvalue will be received from my API, so withngIfI could avoid errorflag is undefined.
– FIL
Nov 23 '18 at 14:04
Do you want to avoid flag undefined error?
– Asanka
Nov 23 '18 at 14:06
Ifdisplay: noneis the only way... yes.
– FIL
Nov 23 '18 at 14:07
|
show 2 more comments
This is because of you have used view child. If you want to use viewchild the component should be rendered as a child component. but with *ngIf it is conditionally rendered. so you can use display:none style instead of *ngIf. display:none only change the visibility.
please refer this link for understand about *ngIf vs display:none
Your edited demo
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
This is because of you have used view child. If you want to use viewchild the component should be rendered as a child component. but with *ngIf it is conditionally rendered. so you can use display:none style instead of *ngIf. display:none only change the visibility.
please refer this link for understand about *ngIf vs display:none
Your edited demo
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
edited Nov 23 '18 at 13:47
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
answered Nov 23 '18 at 13:32
AsankaAsanka
1,085416
1,085416
Ok, but what if I want to usengIf? How to render the component?
– FIL
Nov 23 '18 at 13:40
You cant with viewchild. Viewchild is a refrence of the rendered component.if there is no component it is throwing error.*ngIf doing conditionally rendering.that link which I put shows the differences.
– Asanka
Nov 23 '18 at 13:43
Theflagvalue will be received from my API, so withngIfI could avoid errorflag is undefined.
– FIL
Nov 23 '18 at 14:04
Do you want to avoid flag undefined error?
– Asanka
Nov 23 '18 at 14:06
Ifdisplay: noneis the only way... yes.
– FIL
Nov 23 '18 at 14:07
|
show 2 more comments
Ok, but what if I want to usengIf? How to render the component?
– FIL
Nov 23 '18 at 13:40
You cant with viewchild. Viewchild is a refrence of the rendered component.if there is no component it is throwing error.*ngIf doing conditionally rendering.that link which I put shows the differences.
– Asanka
Nov 23 '18 at 13:43
Theflagvalue will be received from my API, so withngIfI could avoid errorflag is undefined.
– FIL
Nov 23 '18 at 14:04
Do you want to avoid flag undefined error?
– Asanka
Nov 23 '18 at 14:06
Ifdisplay: noneis the only way... yes.
– FIL
Nov 23 '18 at 14:07
Ok, but what if I want to use
ngIf? How to render the component?– FIL
Nov 23 '18 at 13:40
Ok, but what if I want to use
ngIf? How to render the component?– FIL
Nov 23 '18 at 13:40
You cant with viewchild. Viewchild is a refrence of the rendered component.if there is no component it is throwing error.*ngIf doing conditionally rendering.that link which I put shows the differences.
– Asanka
Nov 23 '18 at 13:43
You cant with viewchild. Viewchild is a refrence of the rendered component.if there is no component it is throwing error.*ngIf doing conditionally rendering.that link which I put shows the differences.
– Asanka
Nov 23 '18 at 13:43
The
flag value will be received from my API, so with ngIf I could avoid error flag is undefined.– FIL
Nov 23 '18 at 14:04
The
flag value will be received from my API, so with ngIf I could avoid error flag is undefined.– FIL
Nov 23 '18 at 14:04
Do you want to avoid flag undefined error?
– Asanka
Nov 23 '18 at 14:06
Do you want to avoid flag undefined error?
– Asanka
Nov 23 '18 at 14:06
If
display: none is the only way... yes.– FIL
Nov 23 '18 at 14:07
If
display: none is the only way... yes.– FIL
Nov 23 '18 at 14:07
|
show 2 more comments
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%2f53447419%2fhow-to-use-custom-directive-with-ng-template-and-ngif%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
Couldn't find
*ngIfanywhere in your Template.– SiddAjmera
Nov 23 '18 at 13:29