I have an email template body (in html) that's generated by a server. The template has a section I'd like to make editable in a React component. Simplified, the template looks like this:
<div class="message">
<p>Hello!</p>
<p>Welcome to our app... blah blah</p>
<div class="user-customisable"></div>
<p>Yours, app support</p>
</div>
In my frontend app, I'd like to render the template as it will appear in the final email (which I can do with dangerouslySetInnerHTML), but I'd also like the user-customisable div to be editable so the admin can add a custom message.
I need to be able to add a textarea or contenteditable attribute and hook it up to the state but I'm not sure how to go about it, any pointers would be greatly appreciated!
Related
Let's say an endpoint returns this HTML:
<div data-type="section">
<div data-type="section-header">
Section 1
</div>
<div data-type="section-body">
Lorem ipsum
</div>
</div>
Above template will be stored in component property sections. In an Angular app we will append this HTML to the page via <div class="sections-container" [innerHtml]="sections"></div>.
Before appending HTML template to innerHtml, is it possible to add component or directive to the HTML template received from the backend?
For example we have HighlightDirective, which will set background to yellow and we want to apply it to data-type="section-header" element, so that HTML template will look like this:
<div data-type="section">
<div data-type="section-header" appHighlight>
Section 1
</div>
<div data-type="section-body">
Lorem ipsum
</div>
</div>
Will Angular automatically recognize the appHighlight directive and add it to the component tree? Or it's necessary to hydrate this HTML template?
The solution that I have found it is wrapped HTML into anonymous component and handle string from BE. Then compile that and looks like everything is ok.
Stackblitz example
I'm putting together an application in which there are many modals. As I do not want to repeat the code of the modal, I want to assemble a base component that has the minimum structure and then with that structure to be able to assemble the different modals and to carry what I need inside (form, text, images)
An example of what I am looking to do
<app-modal-base>
<app-form></app-form>
<app-modal-base>
I hope you understand what I'm looking for. In case you can not, someone found an alternative solution?
Thanks
In your base modal template, include the <ng-content></ng-content> tag. When you display your modal, you can use it as follows:
<Modal>
<div id="mydiv">
<p> Simple paragraph </p>
<form>...</form>
</div>
</Modal>
The modal will include what you have included between the <Modal></Modal> tags at the place where the <ng-content></ng-content> tags are in the template for the base modal component. It would look like:
template: `
<div id="closeButton"></div>
<ng-content></ng-content>
`
This information is gathered from this source, and I can't seem to find official docs about this. You might have to try it out.
I am working with Laravel Scout and alogolia as the driver. Since I have vue on the front end, I tried the vue instant search package which works really well.
The issue that I am facing is that I need to customize it to the in app styles we are using.
Refinement Section
This is the particular component I am trying to customize. It tried over riding the classes like they show in Styling Section but that won't cut it for me since I need to add more tags and attributes in there.
<ais-refinement-list attribute-name="categories.title" inline-template>
<div class="column w-1/5">
Hello
</div>
</ais-refinement-list>
Now I know I can start to write an inline template like so but what I don't understand yet, is how to get the values for refinements so I can make the checkboxes and furthermore how to send them back to the component once they are selected. Any help is appreciated.
I dug through the package it self here and then found the template inside here. For some reason I could not see this in vendor code.
Got all the variables and method calls from in there
This is the custom version:
<ais-refinement-list attribute-name="categories.title" inline-template>
<div class="column w-1/5">
<h3>Categories</h3>
<hr class="my-3">
<div class='column w-full mb-4' v-for="facet in facetValues">
<div class="checkbox-control mb-4">
<input type="checkbox" :id="facet.name" :value="facet.name" v-model="facet.isRefined" #change="toggleRefinement(facet)"/>
<label :for="facet.name">{{ facet.name }} ({{ facet.count }})</label>
</div>
</div>
</div>
</ais-refinement-list>
I am trying to add a render a template using the push mutation method. I want to push a section component, but instead of the template content I get the raw output of <vsection></vsection'. Can anyone help me render the actual template content and not the raw tags? I included a jsbin below.
http://jsbin.com/wurofatuve/1/edit?html,js,output
You're thinking about this a little oddly. What I think you'd be better off doing is putting a v-for on a <vsection> component.
<vsection v-for="section in sections">
{{ section.content }}
</vsection>
This way, when you push content to sections it'll out put another one. You'll also have to adjust your section component so you can use the content.
<template id="section-template">
<div class="section">
<slot></slot>
</div>
</template>
Here it is working like I think you want: http://jsbin.com/suhadidobe/1/edit?html,js,output
I am using ionic tinder cards and each new card should be inserted in an predefined array as an object, likewise:
{text: "some_text"}
However, I might be getting html in the string and I want that html to be rendered. How can I do this considering the object above goes to a predefined array, something happens on the ionic code and then I inject it like this?
<div class="card">
{{card.text}}
</div>
use ng-bind-html directive: may be require import the sanitize module
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
You should use ng-bind-html
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
If your HTMl contains potentially dangeorus tag (like script tag), you should sanitize it before