We Keep Coding

Fullcalendar v5 eventContent not working with angular js

I'm using Fullcalendar v5 in angular js, and i'm trying to make a custom event with:
https://fullcalendar.io/docs/content-injection
eventContent: function(arg) {
return { html: constructEvent(arg) }
},
The thing is that if i add:
"<div ng-repeat='user in arg.event._def.extendedProps.users' class='avatar'>"
"<p>{{ user.name }}</p>"
"</div>"
it won't render. It's like it's outside angular's scope. Can someone tell me if there is a way to construct this with angular js logic? Or i need to use vanilla js to iterate through items. Also ng-click doens't work. I tried even with triggering safeApply digest but no results.
I just want to edit the event inside calendar with the framework i'm using, and use angular events inside it to open sidebars or to make api calls.

Rendering Events
with your line <div ng-repeat it seems that you'd like to iterate through an array of events to display on your screen. If this is the case, you simply need to render the events via the 'events' parameter.
https://fullcalendar.io/docs/event-object
Regarding eventContent (the contents of an event, such as title, subtitle, img, etc)
It looks like at the minute only React JSX Nodes are supported. Vanilla JS is your only way forward.
https://fullcalendar.io/docs/content-injection

Generating HTML from markdown only works with dangerouslySetInnerHTML in React App

I am trying to write a simple markdwon previewer.
the problem is when I insert the Generated HTML text inside a div in render method like this:
render() {
return (
<div>
{this.state.genHTML}
</div>
);
}
it does not rendered, and displays as it written with its tags just like as if a string.
But with dangerouslySetInnerHTML the Generated HTML is got rendered.
I want to know why this occurs?

In general, setting HTML from code is risky(because of cross-site scripting (XSS)), and this is why in React you need to use "dangerouslySetInnerHTML" to set it. This is just a rule that you need to follow if you want to use a React framework.

Angular 4, use html without Component backing

I'm using Angular 4, and as of now my application follows the following pattern with
something.component.ts
something.component.html
something.component.css
However, I would like to have a raw html ("legal.html") file and reference it in the "something.component.html" view but I'm not sure about where to even start or what question to ask.
"legal.html" will also have to be bind to the parent controller too (something.component.ts).
Any help on getting something like this to work:
legal.html
<div>Hello</div>
something.component.html
<div>
I'm something
<legal>
</div>
is greatly appreciated.

What you are looking for is component.
You can simple create a new component using following command
ng g component legal
Then in legat.component.html file write your html then in your other html file you can simply refer to your code using selector tag
This link may be helpful
Angular component

Javascript - Execute HTML/Angular ng-include

I'm using AngularJS to design a small app for searching. I have a div that's currently empty, and after running a function, for it to replace it with a div that has ng-include. The div replaces just fine, but ng-include doesn't load up.
I'm currently running the following in console for testing to see get it running. How would I go about getting this to work? Any help is appreciated!
document.getElementById("resultsDiv").innerHTML = '<div ng-include="" src=" \'sr.html\' "></div>';

read about angularjs $compile function

I don't know why you need to make this JavaScript-call, but its definitely no the 'angular-way'. If you need to conditionally include html, i would recommend using ng-if, ng-hide, ng-show or even ng-switch.
You could do something like this:
// somewhere in your controller
$scope.triggerSomeInclude = true;
// in your template
<div ng-if="triggerSomeInclude">
<div ng-include ="'someFile.html'"></div>
</div>
Another approach would be using a directive. They are the only place, where selecting an element directly could make sense (although even there it usually doesn't to select an element via id). But as I said, it's hard to stay what the best method would be, as I'm not sure what you're trying to achieve.
Although you're not using jQuery, what you're trying to do looks very jQueryesque (awful word) as you're selecting an element directly seemingly totally detached from the $digest and $compile-cycles of angular, so I also would recommend to read this answer:
"Thinking in AngularJS" if I have a jQuery background?

In the end, the method I used was templating example used for ngInclude.
http://docs.angularjs.org/api/ng.directive:ngInclude
Inside my controller, for example, by default it would set the following:
$scope.mainDivTemplate = {url: 'partials/test1.html'}
If I wanted to switch it to something else, I'd call a function that would look a little something like this.
$scope.loadHome = ->
$scope.mainDivTemplate = {url: 'partials/home.html'}
$scope.$apply()

Getting classNameBindings working with a button #view in handlebars with ember.js

I'm trying to get a class to appear on a specific button withing a handlebar view based on a property binding. I'm doing something that is like the Todo app that ember.js has on their site (http://emberjs.com/examples/todos/) and I'm trying to make the "Clear Completed" button disappear based on the value of a property.
I have a jsfiddle showing kind of what I'm going for here (http://jsfiddle.net/boushley/XEdNg/). If I add a className inside of the #view tag it shows up fine. But if I add a clasNameBindings it doesn't work the way I expect. Am I going about this wrong or is something broken here?
Aaron

I remember I had similar problems with classNameBindings too.
Try this instead: http://guides.sproutcore20.com/using_handlebars.html#binding-class-names-with-bindattr.
// Javascript for the view
App.AlertView = SC.View.extend({
priority: "p4",
isUrgent: true
});
// Template
<div {{bindAttr class="priority"}}>
Warning!
</div>
// Emits the following HTML
<div class="p4">
Warning!
</div>
If you just want to show/hide the button, then try binding the isVisible property.
isVisibleBinding: 'App.pageController.myProperty'
Hope this helps.

I discussed this here https://github.com/emberjs/ember.js/issues/322 and one of the people on the project helped with this, giving a clear way of how to perform this here https://github.com/emberjs/ember.js/issues/322#issuecomment-3332477 (http://jsfiddle.net/aNZSD/) In essence I needed to create a view that extends ButtonView and place the properties I want on this new view. This is the way it should work, I just wasn't seeing this properly.
Hope this makes it clearer for someone else.