Currently i'm trying to customize Ngx-Editor to add feature like Table in the editor.
the editor is base on textarea and i create table using document.createElement() and insert into textarea using document.execCommand('insertHTML').
but the problem is i want a popover on the table if click and right-click feature so that a popup can be raise to edit the existing table.
but using any interpolation or directive in table does not work.
like {{somecontent}} is printed as it is.
so is there any way to create Table with popover and context-menu outside angular context.
i'm using Angular 4.
It doesn't work because you're adding code to your application post-build.
Ask yourslef : is {{ someContent }} valid vanillaJS code ? If you write this in a Javascript file, will it work ?
No. Because this is an Angular syntax, and it's read by the compiler to be translated into vanillaJS.
Furthermore, you should not manipulate the DOM yourself when using Angular. The framework is supposed to handle that for you.
If you want a custom component, you have to create one from scratch (or fork an existing one). You can't extend a component on the fly.
Related
Currently I'm rendering the html string using innerHtml property after bypassing the angular sanitizing mechanism this is working for rendering the contents. But not able to map the event handlers to a function in angular component.
E.g.the html string will contain a button like below
<button (click)="callme()">Click</button>
the callme function will be part of angular component file. I want this click event to be handled in angular function.
Is it possible to parse this string to html dom and handle the events in angular components.
Sample code which describes this scenario and using angular cdk Portals.
https://stackblitz.com/edit/angular-upaudh?file=src%2Fapp%2Fcdk-portal-overview-example.ts
There are 2 ways that you can implement it, it depends from what you want.
The easy way is to use innerHtml input like this:
HTML
<div [innerHTML]="htmlStr"></div>
TS
htmlStr: 'Hello';
If you want to create a dynamic template that will be translated to HTML at build time. Then you have to go with Portals.
PS: In your example (in the comments) you use [innerHtml] and try to bind it in a Portal. Again [innerHtml] will not be translated before runtime so your click event will not be in the same scope as your component. The thing that you ask is an open conversation in github: Issue. For now you can use the alternatives above to solve your case. You can use innerHtml, and then use renderer2 or native element reference to bind click events to your functions, after they have rendered on the view.
I have a div tag and I want to append the angular material form fields inside that div. The problem is it's not rendering that tags. Can we do this using any method?
enter image description here
The angular way is has an array of object, e,g.
data=[{placeholder:"Enter Name",label:"Name"},
{placeholder:"Enter surname",label:"Surname"}]
and make some like
<mat-card *ngFor="let item of data">
<div class="row">
{{item.label}}<input mat-input [placeholder]="item.placeholder">
</div>
</mat-card>
When you are using angular, never manipulate the DOM manually (via native DOM APIs or jQuery).
When you are using a component or a directive in an angular template (ie. the html of your component), that is not real html, that is transformed to javascript. So when the application is running, where you wrote <mat-car> in you template and you also see <mat-card> in the DOM, that was actually put there by the code generated by angular, but a lot other things also happened (ie. the mat-card component was initialised).
When you just put the components selector manually into the DOM, nothing will happen, because the component is not initialised. To make it work, you have to use the material components from another components' template. Further reading: https://angular.io/guide/architecture-components
Suggestion: don't even import jQuery into the project at all, that way you won't even be tempted to do this.
I have tried CodeMirror for creating a simple code editor with syntax highlighting using simple javascript and html, but the problem is that in my project I have multiple html Tabs, and on for each tab I need a CodeMirror instance.
I don't have any problems creating multiple instances, the problem is that I have only one button that when is clicked needs to read the content of the CodeMirror instance that is in the current Tab and send its content to an Http service, so I can’t find the best way to find the correct CodeMirror instance when the button is clicked.
So I what recommendations could you give me ? or is a better idea to try with other libraries like Ace or Prism for code highlighting?. Thanks.
I have tried using localStorage to save instances of CodeMirror but it retrieves me an error of Converting circular structure to JSON.
I have requirement to create Customize Ext JS HTML Editor. I am facing problem in creating it.
Since you're not providing any information at all there are several solutions:
You can use CSS to style your HTML editor
You can use another editor, like TinyMCE to add extra functionality
You can have a look at the documentation on how to alter functionality of the current editor any maybe even create a subclass of it.
Hope this helps a bit.
I use ckeditor and would like to be able to give the use a list of Template Tokens (for php smarty, but could be anything) that can be inserted into the main editor text at the cursor
eg.
{[$FirstName]}
{[$PhoneNumber]}
{[$BalanceDue]}
Is there a simple way to create a plugin to do this?
There is a post at kuba.co.uk that gives a very simple example of how to do this.
http://www.kuba.co.uk/blog.php?blog_id=15