html content not showing when using template in angular 6
0
I am developing dynamic template creation based on following example. example
but i can't get html output. i.e) dynamic content.
ts file:
@Component({
selector: 'product-item',
template: `
<div class="product">
<ng-container *compile="template; context: this"></ng-container>
</div>`,
})
export class DynamicItemComponent {
@Input() content: string = `<a (click)='changeEditor('TEXT')'>Click me</a>`;
@Input() template: string = `{{content}}`;
}
Html:
<product-item [content]="selectedTemplate.content"></product-item>
how can i get html output. i already used safethtml pipe, that is also not working.
Thanks in advance.
angular angular-template
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
add a comment |
0
I am developing dynamic template creation based on following example. example
but i can't get html output. i.e) dynamic content.
ts file:
@Component({
selector: 'product-item',
template: `
<div class="product">
<ng-container *compile="template; context: this"></ng-container>
</div>`,
})
export class DynamicItemComponent {
@Input() content: string = `<a (click)='changeEditor('TEXT')'>Click me</a>`;
@Input() template: string = `{{content}}`;
}
Html:
<product-item [content]="selectedTemplate.content"></product-item>
how can i get html output. i already used safethtml pipe, that is also not working.
Thanks in advance.
angular angular-template
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
add a comment |
0
0
0
I am developing dynamic template creation based on following example. example
but i can't get html output. i.e) dynamic content.
ts file:
@Component({
selector: 'product-item',
template: `
<div class="product">
<ng-container *compile="template; context: this"></ng-container>
</div>`,
})
export class DynamicItemComponent {
@Input() content: string = `<a (click)='changeEditor('TEXT')'>Click me</a>`;
@Input() template: string = `{{content}}`;
}
Html:
<product-item [content]="selectedTemplate.content"></product-item>
how can i get html output. i already used safethtml pipe, that is also not working.
Thanks in advance.
angular angular-template
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
I am developing dynamic template creation based on following example. example
but i can't get html output. i.e) dynamic content.
ts file:
@Component({
selector: 'product-item',
template: `
<div class="product">
<ng-container *compile="template; context: this"></ng-container>
</div>`,
})
export class DynamicItemComponent {
@Input() content: string = `<a (click)='changeEditor('TEXT')'>Click me</a>`;
@Input() template: string = `{{content}}`;
}
Html:
<product-item [content]="selectedTemplate.content"></product-item>
how can i get html output. i already used safethtml pipe, that is also not working.
Thanks in advance.
angular angular-template
angular angular-template
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
asked Nov 26 '18 at 11:20
BalasubramanianBalasubramanian
606317
606317
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You can create HTML Template using ng-template directive.
<ng-template #anchorRef>
<a (click)="changeEditor('TEXT')">Click me</a>
</ng-template>
You can pass this templateRef as input to child component using @Input decorator.
Child Component:
Using *ngTemplateOutlet structural directive,
@Component({
selector: 'hello',
template: `
<h1>Hello !</h1>
<ng-container *ngTemplateOutlet="name"></ng-container>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: TemplateRef<any>;
}
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
Thanks. but html content is dynamic, so cant use ng-template. my question is. when i bind html content in template it is working, but above example not working.
– Balasubramanian
Nov 26 '18 at 12:37
for dynamic HTML content, you can use [innerHTML] attribute binding. stackoverflow.com/questions/49013217/…
– Suresh Kumar Ariya
Nov 26 '18 at 12:46
if i go with innerhtml, i cant get anger tag events. stackoverflow.com/questions/53447577/…
– Balasubramanian
Nov 26 '18 at 13:19
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
});
}
});
draft saved
draft discarded
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%2f53480006%2fhtml-content-not-showing-when-using-template-in-angular-6%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
0
You can create HTML Template using ng-template directive.
<ng-template #anchorRef>
<a (click)="changeEditor('TEXT')">Click me</a>
</ng-template>
You can pass this templateRef as input to child component using @Input decorator.
Child Component:
Using *ngTemplateOutlet structural directive,
@Component({
selector: 'hello',
template: `
<h1>Hello !</h1>
<ng-container *ngTemplateOutlet="name"></ng-container>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: TemplateRef<any>;
}
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
Thanks. but html content is dynamic, so cant use ng-template. my question is. when i bind html content in template it is working, but above example not working.
– Balasubramanian
Nov 26 '18 at 12:37
for dynamic HTML content, you can use [innerHTML] attribute binding. stackoverflow.com/questions/49013217/…
– Suresh Kumar Ariya
Nov 26 '18 at 12:46
if i go with innerhtml, i cant get anger tag events. stackoverflow.com/questions/53447577/…
– Balasubramanian
Nov 26 '18 at 13:19
add a comment |
0
You can create HTML Template using ng-template directive.
<ng-template #anchorRef>
<a (click)="changeEditor('TEXT')">Click me</a>
</ng-template>
You can pass this templateRef as input to child component using @Input decorator.
Child Component:
Using *ngTemplateOutlet structural directive,
@Component({
selector: 'hello',
template: `
<h1>Hello !</h1>
<ng-container *ngTemplateOutlet="name"></ng-container>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: TemplateRef<any>;
}
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
Thanks. but html content is dynamic, so cant use ng-template. my question is. when i bind html content in template it is working, but above example not working.
– Balasubramanian
Nov 26 '18 at 12:37
for dynamic HTML content, you can use [innerHTML] attribute binding. stackoverflow.com/questions/49013217/…
– Suresh Kumar Ariya
Nov 26 '18 at 12:46
if i go with innerhtml, i cant get anger tag events. stackoverflow.com/questions/53447577/…
– Balasubramanian
Nov 26 '18 at 13:19
add a comment |
0
0
0
You can create HTML Template using ng-template directive.
<ng-template #anchorRef>
<a (click)="changeEditor('TEXT')">Click me</a>
</ng-template>
You can pass this templateRef as input to child component using @Input decorator.
Child Component:
Using *ngTemplateOutlet structural directive,
@Component({
selector: 'hello',
template: `
<h1>Hello !</h1>
<ng-container *ngTemplateOutlet="name"></ng-container>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: TemplateRef<any>;
}
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
You can create HTML Template using ng-template directive.
<ng-template #anchorRef>
<a (click)="changeEditor('TEXT')">Click me</a>
</ng-template>
You can pass this templateRef as input to child component using @Input decorator.
Child Component:
Using *ngTemplateOutlet structural directive,
@Component({
selector: 'hello',
template: `
<h1>Hello !</h1>
<ng-container *ngTemplateOutlet="name"></ng-container>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: TemplateRef<any>;
}
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
answered Nov 26 '18 at 12:29
Suresh Kumar AriyaSuresh Kumar Ariya
4,5911215
4,5911215
Thanks. but html content is dynamic, so cant use ng-template. my question is. when i bind html content in template it is working, but above example not working.
– Balasubramanian
Nov 26 '18 at 12:37
for dynamic HTML content, you can use [innerHTML] attribute binding. stackoverflow.com/questions/49013217/…
– Suresh Kumar Ariya
Nov 26 '18 at 12:46
if i go with innerhtml, i cant get anger tag events. stackoverflow.com/questions/53447577/…
– Balasubramanian
Nov 26 '18 at 13:19
add a comment |
Thanks. but html content is dynamic, so cant use ng-template. my question is. when i bind html content in template it is working, but above example not working.
– Balasubramanian
Nov 26 '18 at 12:37
for dynamic HTML content, you can use [innerHTML] attribute binding. stackoverflow.com/questions/49013217/…
– Suresh Kumar Ariya
Nov 26 '18 at 12:46
if i go with innerhtml, i cant get anger tag events. stackoverflow.com/questions/53447577/…
– Balasubramanian
Nov 26 '18 at 13:19
Thanks. but html content is dynamic, so cant use ng-template. my question is. when i bind html content in template it is working, but above example not working.
– Balasubramanian
Nov 26 '18 at 12:37
Thanks. but html content is dynamic, so cant use ng-template. my question is. when i bind html content in template it is working, but above example not working.
– Balasubramanian
Nov 26 '18 at 12:37
for dynamic HTML content, you can use [innerHTML] attribute binding. stackoverflow.com/questions/49013217/…
– Suresh Kumar Ariya
Nov 26 '18 at 12:46
for dynamic HTML content, you can use [innerHTML] attribute binding. stackoverflow.com/questions/49013217/…
– Suresh Kumar Ariya
Nov 26 '18 at 12:46
if i go with innerhtml, i cant get anger tag events. stackoverflow.com/questions/53447577/…
– Balasubramanian
Nov 26 '18 at 13:19
if i go with innerhtml, i cant get anger tag events. stackoverflow.com/questions/53447577/…
– Balasubramanian
Nov 26 '18 at 13:19
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53480006%2fhtml-content-not-showing-when-using-template-in-angular-6%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
