How can I dynamically render HTML select box with styles and *ngFor in my angular component?
up vote
0
down vote
favorite
So I am creating a simple fill in the blanks app and I have identifiers in the string that I want to replace with the select box.
Typescript
const string = `##blank.0## is the capital city of China. It's most famous attraction is## blank .1##.`;
ngOnInit() {
this.answers.forEach(a => {
this.string = this.sanitizer.bypassSecurityTrustHtml(this.string.replace(`##blank.${a.index}##`,
`<select class="select-boxes">
<option *ngFor="let answer of ${a.answers}" [value]="answer.id">
{{ answer.content }}
</option>
</select> `));
});
}
HTML
<p [innerHTML]="string"></p>
Problem
It renders the select box but neither the styles nor the *ngFor list.
Any help would be greatly appreciated.
javascript angular typescript
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
asked Nov 22 at 12:38
Kissa Eric
429
add a comment |
up vote
0
down vote
favorite
So I am creating a simple fill in the blanks app and I have identifiers in the string that I want to replace with the select box.
Typescript
const string = `##blank.0## is the capital city of China. It's most famous attraction is## blank .1##.`;
ngOnInit() {
this.answers.forEach(a => {
this.string = this.sanitizer.bypassSecurityTrustHtml(this.string.replace(`##blank.${a.index}##`,
`<select class="select-boxes">
<option *ngFor="let answer of ${a.answers}" [value]="answer.id">
{{ answer.content }}
</option>
</select> `));
});
}
HTML
<p [innerHTML]="string"></p>
Problem
It renders the select box but neither the styles nor the *ngFor list.
Any help would be greatly appreciated.
javascript angular typescript
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
asked Nov 22 at 12:38
Kissa Eric
429
It is impossible. Angular won't allow to render like this. try to create dom element using renderer2
– Sheik Althaf
Nov 22 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 at 13:09
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
So I am creating a simple fill in the blanks app and I have identifiers in the string that I want to replace with the select box.
Typescript
const string = `##blank.0## is the capital city of China. It's most famous attraction is## blank .1##.`;
ngOnInit() {
this.answers.forEach(a => {
this.string = this.sanitizer.bypassSecurityTrustHtml(this.string.replace(`##blank.${a.index}##`,
`<select class="select-boxes">
<option *ngFor="let answer of ${a.answers}" [value]="answer.id">
{{ answer.content }}
</option>
</select> `));
});
}
HTML
<p [innerHTML]="string"></p>
Problem
It renders the select box but neither the styles nor the *ngFor list.
Any help would be greatly appreciated.
javascript angular typescript
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
asked Nov 22 at 12:38
Kissa Eric
429
So I am creating a simple fill in the blanks app and I have identifiers in the string that I want to replace with the select box.
Typescript
const string = `##blank.0## is the capital city of China. It's most famous attraction is## blank .1##.`;
ngOnInit() {
this.answers.forEach(a => {
this.string = this.sanitizer.bypassSecurityTrustHtml(this.string.replace(`##blank.${a.index}##`,
`<select class="select-boxes">
<option *ngFor="let answer of ${a.answers}" [value]="answer.id">
{{ answer.content }}
</option>
</select> `));
});
}
HTML
<p [innerHTML]="string"></p>
Problem
It renders the select box but neither the styles nor the *ngFor list.
Any help would be greatly appreciated.
javascript angular typescript
javascript angular typescript
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
asked Nov 22 at 12:38
Kissa Eric
429
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
asked Nov 22 at 12:38
Kissa Eric
429
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
edited Nov 22 at 13:21
SiddAjmera
12.1k21137
12.1k21137
asked Nov 22 at 12:38
Kissa Eric
429
asked Nov 22 at 12:38
Kissa Eric
429
asked Nov 22 at 12:38
Kissa Eric
429
429
It is impossible. Angular won't allow to render like this. try to create dom element using renderer2
– Sheik Althaf
Nov 22 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 at 13:09
add a comment |
It is impossible. Angular won't allow to render like this. try to create dom element using renderer2
– Sheik Althaf
Nov 22 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 at 13:09
It is impossible. Angular won't allow to render like this. try to create dom element using renderer2
– Sheik Althaf
Nov 22 at 12:47
It is impossible. Angular won't allow to render like this. try to create dom element using renderer2
– Sheik Althaf
Nov 22 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 at 12:50
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 at 13:09
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 at 13:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
Following my previous (& deleted) answer, you reuqested an example of dynamic rendering.
I have made a stackblitz as per the one you have provided :
https://stackblitz.com/edit/my-angular-starter-xelsuj?file=app/app.component.ts
In this stackblitz, you will see that the content is dynamic, but still in the Angular context. Thanks to that, you can still use the Angular directives, and you don't rely on innerHTML anymore.
export class AppComponent {
content: SafeHtml;
str = `##blank.0## is the capital city of China, ##blank.1## is the capital of France.`;
answers = [{
ref: 0,
answers: [
{ id: 0, content: 'Beijing' },
{ id: 1, content: 'Shanghai' },
{ id: 2, content: 'Ghuangzhou' },
{ id: 3, content: 'The Great wall' },
],
bit: undefined,
}, {
ref: 1,
answers: [
{ id: 0, content: 'Stockholm' },
{ id: 1, content: 'New York' },
{ id: 2, content: 'Malibu' },
{ id: 3, content: 'Paris' },
],
bit: undefined,
}];
constructor(sanitizer: DomSanitizer) {
// Split the string into bits
let bits = this.str.split(/##blank.d+##/);
// remove empty bits (mostly start & end)
bits = bits.filter(bit => !!bit);
// Add the bit to the answer
this.answers = this.answers.map((answer, index) => ({
...answer,
bit: bits[index],
}));
}
}
answered Nov 23 at 8:26
trichetriche
24.8k42050
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 at 8:43
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',
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%2f53431228%2fhow-can-i-dynamically-render-html-select-box-with-styles-and-ngfor-in-my-angula%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
up vote
1
down vote
accepted
Following my previous (& deleted) answer, you reuqested an example of dynamic rendering.
I have made a stackblitz as per the one you have provided :
https://stackblitz.com/edit/my-angular-starter-xelsuj?file=app/app.component.ts
In this stackblitz, you will see that the content is dynamic, but still in the Angular context. Thanks to that, you can still use the Angular directives, and you don't rely on innerHTML anymore.
export class AppComponent {
content: SafeHtml;
str = `##blank.0## is the capital city of China, ##blank.1## is the capital of France.`;
answers = [{
ref: 0,
answers: [
{ id: 0, content: 'Beijing' },
{ id: 1, content: 'Shanghai' },
{ id: 2, content: 'Ghuangzhou' },
{ id: 3, content: 'The Great wall' },
],
bit: undefined,
}, {
ref: 1,
answers: [
{ id: 0, content: 'Stockholm' },
{ id: 1, content: 'New York' },
{ id: 2, content: 'Malibu' },
{ id: 3, content: 'Paris' },
],
bit: undefined,
}];
constructor(sanitizer: DomSanitizer) {
// Split the string into bits
let bits = this.str.split(/##blank.d+##/);
// remove empty bits (mostly start & end)
bits = bits.filter(bit => !!bit);
// Add the bit to the answer
this.answers = this.answers.map((answer, index) => ({
...answer,
bit: bits[index],
}));
}
}
answered Nov 23 at 8:26
trichetriche
24.8k42050
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 at 8:43
add a comment |
up vote
1
down vote
accepted
Following my previous (& deleted) answer, you reuqested an example of dynamic rendering.
I have made a stackblitz as per the one you have provided :
https://stackblitz.com/edit/my-angular-starter-xelsuj?file=app/app.component.ts
In this stackblitz, you will see that the content is dynamic, but still in the Angular context. Thanks to that, you can still use the Angular directives, and you don't rely on innerHTML anymore.
export class AppComponent {
content: SafeHtml;
str = `##blank.0## is the capital city of China, ##blank.1## is the capital of France.`;
answers = [{
ref: 0,
answers: [
{ id: 0, content: 'Beijing' },
{ id: 1, content: 'Shanghai' },
{ id: 2, content: 'Ghuangzhou' },
{ id: 3, content: 'The Great wall' },
],
bit: undefined,
}, {
ref: 1,
answers: [
{ id: 0, content: 'Stockholm' },
{ id: 1, content: 'New York' },
{ id: 2, content: 'Malibu' },
{ id: 3, content: 'Paris' },
],
bit: undefined,
}];
constructor(sanitizer: DomSanitizer) {
// Split the string into bits
let bits = this.str.split(/##blank.d+##/);
// remove empty bits (mostly start & end)
bits = bits.filter(bit => !!bit);
// Add the bit to the answer
this.answers = this.answers.map((answer, index) => ({
...answer,
bit: bits[index],
}));
}
}
answered Nov 23 at 8:26
trichetriche
24.8k42050
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 at 8:43
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Following my previous (& deleted) answer, you reuqested an example of dynamic rendering.
I have made a stackblitz as per the one you have provided :
https://stackblitz.com/edit/my-angular-starter-xelsuj?file=app/app.component.ts
In this stackblitz, you will see that the content is dynamic, but still in the Angular context. Thanks to that, you can still use the Angular directives, and you don't rely on innerHTML anymore.
export class AppComponent {
content: SafeHtml;
str = `##blank.0## is the capital city of China, ##blank.1## is the capital of France.`;
answers = [{
ref: 0,
answers: [
{ id: 0, content: 'Beijing' },
{ id: 1, content: 'Shanghai' },
{ id: 2, content: 'Ghuangzhou' },
{ id: 3, content: 'The Great wall' },
],
bit: undefined,
}, {
ref: 1,
answers: [
{ id: 0, content: 'Stockholm' },
{ id: 1, content: 'New York' },
{ id: 2, content: 'Malibu' },
{ id: 3, content: 'Paris' },
],
bit: undefined,
}];
constructor(sanitizer: DomSanitizer) {
// Split the string into bits
let bits = this.str.split(/##blank.d+##/);
// remove empty bits (mostly start & end)
bits = bits.filter(bit => !!bit);
// Add the bit to the answer
this.answers = this.answers.map((answer, index) => ({
...answer,
bit: bits[index],
}));
}
}
answered Nov 23 at 8:26
trichetriche
24.8k42050
Following my previous (& deleted) answer, you reuqested an example of dynamic rendering.
I have made a stackblitz as per the one you have provided :
https://stackblitz.com/edit/my-angular-starter-xelsuj?file=app/app.component.ts
In this stackblitz, you will see that the content is dynamic, but still in the Angular context. Thanks to that, you can still use the Angular directives, and you don't rely on innerHTML anymore.
export class AppComponent {
content: SafeHtml;
str = `##blank.0## is the capital city of China, ##blank.1## is the capital of France.`;
answers = [{
ref: 0,
answers: [
{ id: 0, content: 'Beijing' },
{ id: 1, content: 'Shanghai' },
{ id: 2, content: 'Ghuangzhou' },
{ id: 3, content: 'The Great wall' },
],
bit: undefined,
}, {
ref: 1,
answers: [
{ id: 0, content: 'Stockholm' },
{ id: 1, content: 'New York' },
{ id: 2, content: 'Malibu' },
{ id: 3, content: 'Paris' },
],
bit: undefined,
}];
constructor(sanitizer: DomSanitizer) {
// Split the string into bits
let bits = this.str.split(/##blank.d+##/);
// remove empty bits (mostly start & end)
bits = bits.filter(bit => !!bit);
// Add the bit to the answer
this.answers = this.answers.map((answer, index) => ({
...answer,
bit: bits[index],
}));
}
}
answered Nov 23 at 8:26
trichetriche
24.8k42050
answered Nov 23 at 8:26
trichetriche
24.8k42050
answered Nov 23 at 8:26
trichetriche
24.8k42050
answered Nov 23 at 8:26
trichetriche
24.8k42050
24.8k42050
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 at 8:43
add a comment |
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 at 8:43
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 at 8:43
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 at 8:43
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53431228%2fhow-can-i-dynamically-render-html-select-box-with-styles-and-ngfor-in-my-angula%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 is impossible. Angular won't allow to render like this. try to create dom element using renderer2
– Sheik Althaf
Nov 22 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 at 13:09