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.
Related
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.
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.
I am trying to create a component which displays a code example for a given component. The component shall be passed as HTML to the code-example component and be rendered once normally but also have its code displayed below.
When trying to fetch the code from <ng-content> in ngOnInit, Angular already started rendering the component, which means that I do not get the original code between the tags.
Passing the code via input does not work out, as the components may use single and double quotes which will cause problems when binding the data.
What I also tried is passing the code escaped to the component like
<code-example>
<component></component>
</code-example>
To unescape it and render it afterwards, which did not work out for me as I had trouble adding this pre-defined element to the DOM in a way that Angular renders it as a component.
Are there any other methods of dealing with this problem that I might be missing?
As #Timothy suggested you may try the <pre> tag.
If you also want to highlight the syntax of your code I can recommend a third party module called ng2-prism.
This is a library that supports multiple languages and is quite easy to use.
Is there any way to achieve angularjs attribute directive in polymer. I want to call a function based on a particular attribute attached to any element.
This is what works for me right now, but this is very non-generic.
Is there any easier way to extend behavior of elements using just attributes like
<paper-input behavior="custom-behavior" custom-behavior-attribute="some-data"></paper-input>
I have started building an app in Polymer which was already done in Angular. Even I had the same query running on my mind and I found this link related to this topic and it says Polymer's behavior is the equivalent to Angular's attribute directive.
https://plus.google.com/+JustinFagnani/posts/EjdR14bA7Dj
It will be useful if someone can confirm that there are no other approach available to achieve the same.
I'm using a filter returning plain HTML in vuejs. And in this HTML there is a v-on tag.
How can I make vuejs to parse again HTML to detect new content/events listeners/ etc. ?
Thanks
UPDATE: In Vue 1.0, if you know what components you need to instantiate (versus compiling random HTML), you can also use the parent argument on View Model instantiation: http://vuejs.org/api/#parent
You will need to manually compile that HTML within the View Model using $compile (currently undocumented). See this discussion for more information:
https://github.com/vuejs/Discussion/issues/77