Mixing
How can I dynamically render HTML select box with styles and *ngFor in my angular component?
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 '18 at 13:21
SiddAjmera
15.6k31238
asked Nov 22 '18 at 12:38
Kissa EricKissa Eric
429
add a comment |
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 '18 at 13:21
SiddAjmera
15.6k31238
asked Nov 22 '18 at 12:38
Kissa EricKissa Eric
429
It is impossible. Angular won't allow to render like this. try to create dom element using renderer2
– Sheik Althaf
Nov 22 '18 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 '18 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 '18 at 13:09
add a comment |
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 '18 at 13:21
SiddAjmera
15.6k31238
asked Nov 22 '18 at 12:38
Kissa EricKissa 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 '18 at 13:21
SiddAjmera
15.6k31238
asked Nov 22 '18 at 12:38
Kissa EricKissa Eric
429
edited Nov 22 '18 at 13:21
SiddAjmera
15.6k31238
asked Nov 22 '18 at 12:38
Kissa EricKissa Eric
429
edited Nov 22 '18 at 13:21
SiddAjmera
15.6k31238
edited Nov 22 '18 at 13:21
SiddAjmera
15.6k31238
edited Nov 22 '18 at 13:21
SiddAjmera
15.6k31238
15.6k31238
asked Nov 22 '18 at 12:38
Kissa EricKissa Eric
429
asked Nov 22 '18 at 12:38
Kissa EricKissa Eric
429
asked Nov 22 '18 at 12:38
Kissa EricKissa 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 '18 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 '18 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 '18 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 '18 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 '18 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 '18 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 '18 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 '18 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 '18 at 12:50
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 '18 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 '18 at 13:09
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 '18 at 13:09
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 8:26
trichetrichetrichetriche
28k42359
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 '18 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',
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%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
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 '18 at 8:26
trichetrichetrichetriche
28k42359
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 '18 at 8:43
add a comment |
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 '18 at 8:26
trichetrichetrichetriche
28k42359
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 '18 at 8:43
add a comment |
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 '18 at 8:26
trichetrichetrichetriche
28k42359
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 '18 at 8:26
trichetrichetrichetriche
28k42359
answered Nov 23 '18 at 8:26
trichetrichetrichetriche
28k42359
answered Nov 23 '18 at 8:26
trichetrichetrichetriche
28k42359
answered Nov 23 '18 at 8:26
trichetrichetrichetriche
28k42359
28k42359
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 '18 at 8:43
add a comment |
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 '18 at 8:43
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 '18 at 8:43
Thank you. Let me try to implement that
– Kissa Eric
Nov 23 '18 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.
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 '18 at 12:47
did you try moving the <select> tag to another component and append the component to String.
– Suresh Kumar Ariya
Nov 22 '18 at 12:50
Maybe this can help you: netbasal.com/…
– Jacopo Sciampi
Nov 22 '18 at 13:09