Is it possible to replace dynamically inserted angular component tags?
I have text like the following which I am getting from an api :
Testing <app-test></app-test> for <app-test></app-test> dynamically inserting another <app-test></app-test>
I have a test component and all I am trying to achieve is for the output from the text component to replace the <app-test></app-test> tags.
In my ts file, I am using DomSanitizer so my tags are not striped out, shown below:
this.text = this.sanitizer.bypassSecurityTrustHtml("Testing <app-test></app-test> for <app-test></app-test> dynamically inserting another <app-test></app-test>");
And in my html I am using one-way binding to display the text, like below:
<div [innerHTML]='text'></div>
But the output is just the text without the tags.
You can create a dynamic components by a component ref
In this link you can read about it: https://medium.com/#lukaonik/how-to-create-dynamic-components-in-angular-a2f449acb987
Other solution but not the best is call different components by an ng-swich
Related
i have use html2-pdf in VueJS project in terms of generate pdf file from HTML.
My problem is, is there way to use VueJS variable like {{ variableName }} inside tag <section slot="pdf-content"> ?
Because i have tried but it not print out the value of the variableName. Is there any way to use variable inside the tag of html2-pdf?
Thank you so much.
using vue.js I'm wondering what is considered the best way to insert span elements into a text at multiple given positions? Specifically, in a simplified example, I have:
text = "This is a random text. It goes on and on..."
positions = [0, 5, 17]
span_templ = '<span class="some_class" />' <-- closed span for sake of simplicity
The workflow is: the user clicks on a button, some RESTful request is sent to a server, which returns both text and positions. A <p> shall be updated with the text but with inserted <span> elements.
I'm relatively new to vue.js, so I'm wondering what is more typical in vue.js: rather do the String update in the template {{ ... }} itself or would you first update the String in plan JS and then simply refer to the String in the moustache part?
You can use v-html and pass the HTML string as prop.
Example use: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
API doc: https://v2.vuejs.org/v2/api/#v-html
I'm trying to add xml string into my extent-report. It is instead treating it as an html tag and displaying in the dom instead of UI.
I tried adding chars before and after xml string and then it is printing the chars but not the xml data
Reporter.addStepLog("text is <"+"<response><abc value=10></abc></response>"+">"
I want the report to show o/p as-> text is <<response><abc value=10></abc></response>>
but i am getting-> text is <>
P.S.:If you see the console you will get what i am trying to explain !
you may try to use following html element :
Reporter.addStepLog("text is <textarea rows='20' cols='40' style='border:none;'>"+"<response><abc value=10></abc></response>"+"</textarea>");
For information, I found this trick on this site :
Display XML content in HTML page
I have created the text input field as component. Now i am using the component in a form multiple times. I want to apply a directive only to selected fields. I want to pass the directive name as the #input to component and pass it to component html template as attribute dynamically.
Psuedo code
<form>
<text-input-comp [directiveName]="mydirective" ></text-input-comp>
<text-input-comp></text-input-comp>
<text-input-comp></text-input-comp>
</form>
Any help will be appreciated.
Thanks
I am trying to automate test case using Protractor and Jasmine. The problem is I have an "article" web element tag that gets created at runtime and this web-element has a as sub element. This div element has a "id" tag associated with it. The structure of the code is below.
<article class="a b c d" data-ng-repeat="xyz repeat">
<div id="THIS IS WHAT I WANT" class="class name">
</article>
Now I am able to get get hold of the article web-element. but I am not able to get the ID attribute in the div. The ID values is generated dynamically. Kindly suggest how I can get the ID value.
Thank you
You can use a CSS Selector like this:
article > div
This will get you a div inside of an article. Now you can use this to play around and specify the selector further with classes or other stuff.
If you managed to get the div element you can then pull out the idea using (not sure if the syntax is correct but you should get the idea):
element.getAttribute('id')
1) element(by.xpath(//div[#class='class name'])).getAttribute('id')
2) element(by.xpath(//article [#class='abcd']//div[#id='THIS IS WHAT I WANT'])).getAttribute('id')
You can use chains like this:
element(by.classname('')).element(by.className('classname'));
or
element(by.css('css of parent')).element(by.css('child css'));
or you can use element(by.repeater('repeat in reapeats')).element(by.css(''));