Dynamic HTML from ts to HTML file rendering not working
I have a requirement to form html tag based on conditions in .ts file and bind it with innerHTML of div component as below :
my.component.ts:
var htmlTag = '';
if (fieldType === 'LOV') {
htmlTag = '<select type="text" class="form-control" id="' + id + '" name="' + id + '" >' +
'<option disabled selected>Select</option>';
for (var i = 0; i < this.entityParameters.length; i++) {
if (this.entityParameters[i].parameter_name === parameterName) {
htmlTag = htmlTag + '<option>' + this.entityParameters[i].lov_value + '</option>'
}
}
htmlTag = htmlTag + '</select>';
} else if (fieldType === 'NUMBER') {
htmlTag = '<input type="number" class="form-control" id="' + id + '" name="' + id + '">';
console.log(id)
} else if (fieldType === 'DATE')
htmlTag = '<input type="date" class="form-control" id="' + id + '" name="' + id + '">';
else if (fieldType === 'VARCHAR')
htmlTag = '<input type="text" class="form-control" id= "' + id + '" name="' + id + '">';
this.parametersHTML = this.parametersHTML +
'<div class="row">' +
'<div class="col-sm-1"></div>' +
'<div class="col-sm-4">' +
'<label for="' + id + '" style="line-height: 2.2">' + parameterName + '</label>' +
'</div>' +
'<div class="col-sm-4">' + htmlTag +
'</div>' +
'</div>';
}
Note: Here entityParameters contains the JSON data which I get after consuming a Rest API.
my.component.html:
<form #frmParam="ngForm">
<div class="form-group">
<div [innerHTML]="parametersHTML | sanitizeHtml" class="jumbotron">
</div>
</div>
</form>
After the form is rendered in UI, I am trying to access form fields value as {{frmParam.value | JSON }} in .html file.
Somehow the binding is not working. I tried the same with [(ngModel)] too but the Angular tags are not getting rendered.
Can anyone please help me with this?
angular6
edited Nov 14 '18 at 9:59
barbsan
2,38321222
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
add a comment |
I have a requirement to form html tag based on conditions in .ts file and bind it with innerHTML of div component as below :
my.component.ts:
var htmlTag = '';
if (fieldType === 'LOV') {
htmlTag = '<select type="text" class="form-control" id="' + id + '" name="' + id + '" >' +
'<option disabled selected>Select</option>';
for (var i = 0; i < this.entityParameters.length; i++) {
if (this.entityParameters[i].parameter_name === parameterName) {
htmlTag = htmlTag + '<option>' + this.entityParameters[i].lov_value + '</option>'
}
}
htmlTag = htmlTag + '</select>';
} else if (fieldType === 'NUMBER') {
htmlTag = '<input type="number" class="form-control" id="' + id + '" name="' + id + '">';
console.log(id)
} else if (fieldType === 'DATE')
htmlTag = '<input type="date" class="form-control" id="' + id + '" name="' + id + '">';
else if (fieldType === 'VARCHAR')
htmlTag = '<input type="text" class="form-control" id= "' + id + '" name="' + id + '">';
this.parametersHTML = this.parametersHTML +
'<div class="row">' +
'<div class="col-sm-1"></div>' +
'<div class="col-sm-4">' +
'<label for="' + id + '" style="line-height: 2.2">' + parameterName + '</label>' +
'</div>' +
'<div class="col-sm-4">' + htmlTag +
'</div>' +
'</div>';
}
Note: Here entityParameters contains the JSON data which I get after consuming a Rest API.
my.component.html:
<form #frmParam="ngForm">
<div class="form-group">
<div [innerHTML]="parametersHTML | sanitizeHtml" class="jumbotron">
</div>
</div>
</form>
After the form is rendered in UI, I am trying to access form fields value as {{frmParam.value | JSON }} in .html file.
Somehow the binding is not working. I tried the same with [(ngModel)] too but the Angular tags are not getting rendered.
Can anyone please help me with this?
angular6
edited Nov 14 '18 at 9:59
barbsan
2,38321222
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
add a comment |
I have a requirement to form html tag based on conditions in .ts file and bind it with innerHTML of div component as below :
my.component.ts:
var htmlTag = '';
if (fieldType === 'LOV') {
htmlTag = '<select type="text" class="form-control" id="' + id + '" name="' + id + '" >' +
'<option disabled selected>Select</option>';
for (var i = 0; i < this.entityParameters.length; i++) {
if (this.entityParameters[i].parameter_name === parameterName) {
htmlTag = htmlTag + '<option>' + this.entityParameters[i].lov_value + '</option>'
}
}
htmlTag = htmlTag + '</select>';
} else if (fieldType === 'NUMBER') {
htmlTag = '<input type="number" class="form-control" id="' + id + '" name="' + id + '">';
console.log(id)
} else if (fieldType === 'DATE')
htmlTag = '<input type="date" class="form-control" id="' + id + '" name="' + id + '">';
else if (fieldType === 'VARCHAR')
htmlTag = '<input type="text" class="form-control" id= "' + id + '" name="' + id + '">';
this.parametersHTML = this.parametersHTML +
'<div class="row">' +
'<div class="col-sm-1"></div>' +
'<div class="col-sm-4">' +
'<label for="' + id + '" style="line-height: 2.2">' + parameterName + '</label>' +
'</div>' +
'<div class="col-sm-4">' + htmlTag +
'</div>' +
'</div>';
}
Note: Here entityParameters contains the JSON data which I get after consuming a Rest API.
my.component.html:
<form #frmParam="ngForm">
<div class="form-group">
<div [innerHTML]="parametersHTML | sanitizeHtml" class="jumbotron">
</div>
</div>
</form>
After the form is rendered in UI, I am trying to access form fields value as {{frmParam.value | JSON }} in .html file.
Somehow the binding is not working. I tried the same with [(ngModel)] too but the Angular tags are not getting rendered.
Can anyone please help me with this?
angular6
edited Nov 14 '18 at 9:59
barbsan
2,38321222
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
I have a requirement to form html tag based on conditions in .ts file and bind it with innerHTML of div component as below :
my.component.ts:
var htmlTag = '';
if (fieldType === 'LOV') {
htmlTag = '<select type="text" class="form-control" id="' + id + '" name="' + id + '" >' +
'<option disabled selected>Select</option>';
for (var i = 0; i < this.entityParameters.length; i++) {
if (this.entityParameters[i].parameter_name === parameterName) {
htmlTag = htmlTag + '<option>' + this.entityParameters[i].lov_value + '</option>'
}
}
htmlTag = htmlTag + '</select>';
} else if (fieldType === 'NUMBER') {
htmlTag = '<input type="number" class="form-control" id="' + id + '" name="' + id + '">';
console.log(id)
} else if (fieldType === 'DATE')
htmlTag = '<input type="date" class="form-control" id="' + id + '" name="' + id + '">';
else if (fieldType === 'VARCHAR')
htmlTag = '<input type="text" class="form-control" id= "' + id + '" name="' + id + '">';
this.parametersHTML = this.parametersHTML +
'<div class="row">' +
'<div class="col-sm-1"></div>' +
'<div class="col-sm-4">' +
'<label for="' + id + '" style="line-height: 2.2">' + parameterName + '</label>' +
'</div>' +
'<div class="col-sm-4">' + htmlTag +
'</div>' +
'</div>';
}
Note: Here entityParameters contains the JSON data which I get after consuming a Rest API.
my.component.html:
<form #frmParam="ngForm">
<div class="form-group">
<div [innerHTML]="parametersHTML | sanitizeHtml" class="jumbotron">
</div>
</div>
</form>
After the form is rendered in UI, I am trying to access form fields value as {{frmParam.value | JSON }} in .html file.
Somehow the binding is not working. I tried the same with [(ngModel)] too but the Angular tags are not getting rendered.
Can anyone please help me with this?
angular6
angular6
edited Nov 14 '18 at 9:59
barbsan
2,38321222
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
edited Nov 14 '18 at 9:59
barbsan
2,38321222
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
edited Nov 14 '18 at 9:59
barbsan
2,38321222
edited Nov 14 '18 at 9:59
barbsan
2,38321222
edited Nov 14 '18 at 9:59
barbsan
2,38321222
2,38321222
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
asked Nov 14 '18 at 8:31
Saurav GuptaSaurav Gupta
11
11
add a comment |
add a comment |
0
active
oldest
votes
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%2f53295890%2fdynamic-html-from-ts-to-html-file-rendering-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53295890%2fdynamic-html-from-ts-to-html-file-rendering-not-working%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
