Develop Reference

AngularJS Expression breaks with StencilJS

I have a custom select web component created with StencilJS and I am using it in AngularJS like this:
<my-select>
<my-option ng-repeat="item in items">
{{item.value}}
</my-option>
</my-select>
The problem is that whenever I push a new item on the items array (items.push({key: 'some', value: 'Some Value'})), the expression seems to print also it's own syntax in the DOM like this:
This is the <my-option> StencilJS component structure:
render() {
return (
<div class="option-container" onClick={this.selectOption(this)}>
<slot />
</div>
);
}
Any help would be so much appreciated. Thank you.

Did you tried some newer Browser like the newest Firefox or Chrome? I faced some really stupid issues because Edge Browser for example does render the <slot tag as an String initially and just renders the innerHTML once. The other Browser will keep the slot as an DOM Element so its more dynamic.

Include component from parent app in component contained in node_modules directory

I am working on Vue app that incorporates Vue Bootstrap Calendar, and I would like to be able to override the content of the day cell (handled by the Day.vue component) to add my own custom content inside. My thought was initially to modify the Day component to include <slot></slot> tags and pass in the custom content that way.
The problem has to do with accessing the Day component. To include the calendar in your app, you include the Calendar.vue component, which includes Week.vue, which in turn includes Day.vue. As I understand slots, I have to have the child component (Day.vue in this case) included in the component where I'm passing the data, which means it would need to be included in my own component.
If this is not possible, my other thought is to perhaps modify the library by adding another configuration prop (something like dayCustomContent) to the Calendar.vue that indicates that the Day cell content is custom content, pass that in to Calendar.vue, and then down to Day.vue, and then in the Day.vue template, have a v-if conditional based on this prop that either displays the custom content or the default cell content, something like:
<template>
<div class="day-cell" v-if="dayCustomContent">
...my custom content here...
</div>
<div class="day-cell" v-else>
...default events from my.events goes here...
</div>
</template>
I would probably then need to define a custom component to render whatever custom content I want to display, and somehow include that component within Day.vue.
So to sum up, my questions are these:
1) Is there a way to do what I need with slots?
2) For my second option, am I going down the right path? I'm open to suggestions.
UPDATE: I was able to get this done by adding a boolean customDayContent prop in Calendar.vue like so and passing it down to Week.vue and then to Day.vue:
<template>
...
<div class="dates" ref="dates">
<Week
v-for="(week, index) in Weeks"
:firstDay="firstDay"
:key="week + index"
:week="week"
:canAddEvent="canAddEvent"
:canDeleteEvent="canDeleteEvent"
:customDayContent="customDayContent"
:displayWeekNumber="displayWeekNumber"
#eventAdded="eventAdded"
#eventDeleted="eventDeleted"
></Week>
</div>
...
</template>
<script>
export default {
...
props: {
...
customDayContent: {
type: Boolean,
default: false
}
},
}
</script>
and then in Day.vue, do like I had suggested with v-if:
<template>
<div class="day-cell" v-if="customDayContent">
<custom-day></custom-day>
</div>
<div
class="day-cell"
:class="{'today' : day.isToday, 'current-month' : day.isCurrentMonth, 'weekend': day.isWeekEnd, 'selected-day':isDaySelected}"
#click="showDayOptions"
v-else
>
... existing code goes here...
</div>
</template>
The last part is referencing the CustomDay.vue component referenced in my v-if block. I want the user to be able to define the content of their own custom CustomDay.vue template in their own parent app. However, I'm having trouble trying to figure out how to do that. Following the pattern of including components already in this component, I added this in the components section of Day.vue:
CustomDay: require("../../../../src/Components/CustomDay.vue").default
? require("../../../../src/Components/CustomDay.vue").default
: require("../../../../src/Components/CustomDay.vue")
However, no matter what I try along these lines, I get an error that the relative module was not found. On top of that, I need to add it to the componentsarray only if customDayContent is true. What is the best way to do that? In a watcher or computer property, perhaps? Or another way?

VueJs Conditional handlebars

I'm trying to use VueJs conditional rendering using handlebars in vueJs 2.0 as per their documentation but eslint is coming back with and error:
- avoid using JavaScript keyword as property name: "if" in expression {{#if ok}}
- avoid using JavaScript keyword as property name: "if" in expression {{/if}}
VueJs does not seem to be rendering it.
<!-- Handlebars template -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}

If you are trying to use Vue.js syntax, the documentation outlines just a few lines down what's done for Vue.js. You would use the v-if directive.
<h1 v-if="ok">Yes</h1>
If like you mentioned, you're wanting to use Handlebars alongside Vue.js, note that both of them use the same {{ curly braces in templates. You may need to change Vue's use of the curly braces like so...
Vue.config.delimiters = ['<%', '%>'];

Either:
Using v-if to conditionally render
<h1 v-if="isVisible"> Yes </h1>
or using v-show to add a hidden attribute to that element style
<h1 v-show="isVisible"> Yes </h1>
either can be used but be careful with v-if since the element won't be in the DOM if the condition is not met.

I believe that is simply to document that the conditional does not go on a parent tag, but rather it is placed directly on the node that you want to conditionally display.
In other words its simply a comparison not part of Vue.js markup, but rather part of Handlebars.

Vue conditional rendering syntax
<h1 v-if="ok">Yes</h1>
<h1 v-show="ok">Yes</h1>
Details in original docs.
https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Firstly, You should look at the vue documentation .https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-showjs and by the way, you can use "v-if" and "v-show"attributes, in flowing related to
examples.
<h1 v-if='isShow'>Test</h1>
<h1 v-show='isShow'>Test</h1>

For anyone coming here from a search trying to conditionally render inside {{ }} braces, you could always use a computed property:
import { computed } from 'vue';
<script setup>
const submitButtonText = computed(() => {
return props.formObject ? 'Save' : 'Create';
});
</script>
<template>
<form>
<button type="submit">
{{ submitButtonText }}
</button>
</form>
</template>
v-if and v-if-else work perfect for large elements, but this is great for simple one-line conditional text.

Im using ember with ember-modal-dialog package. Is there a way to pass a model into the close action cancelAlarmEdit?

{{#each alarms as |alarm|}}
{{if alarm.isEditing}}
{{#modal-dialog translucentOverlay=true close="cancelAlarmEdit"}}
//this works down here
<button type="btn btn-danger" {{action 'cancelAlarmEdit' alarm}}</button>
{{/modal-dialog}}
{{else}}
{{/if}}
{{/each}
Is there a way to pass a model into cancelAlarmEdit from the close tag above? I had trouble finding relevant info on it from https://github.com/yapplabs/ember-modal-dialog .

I'm pretty sure this should work:
{{#modal-dialog close=(action 'cancelAlarmEdit' alarm)}}
Actually the {{action}} helper is pretty similar to Javascripts bind.

I don't see such feature neither in docs, nor in the source code of this addon. You may try to create a new component, based on this addon's:
// app/components/modal-dialog.js
import ModalDialog from 'ember-modal-dialog/components/modal-dialog';
export default ModalDialog.extend({
actions: {
close() {
this.sendAction('close', this.get('closeParam'));
}
}
});
In template your should be able to pass closeParam attribute.
And if you will not succeed in extending, it's not that hard to write your own modal component.

angular expression not working for html

I'm using angular grid -
let's say i have a scope object as follows:
$scope.test = 3
If I want to dynamically set an html id, I would do something like this:
<div id="{{test}}"></div>
Checking the DOM, I see the following:
<div id="3"></div>
For my angular grid, I want to do something like this:
<div ag-grid="{{test}}"></div>
Checking the DOM I literally get:
<div ag-grid="{{test}}"></div>
Is there a way around this?

You can use ngAttr and do this like the following:
ng-attr-ag_grid="{{test}}"
Please check if this helps

Use
<div ag-grid="test"></div>
Check following link and check first example html file forag-grid tag with binding variable
Note: Based on example test should be object not string or other type.

Is {{ }} necessary?
You can try:
ag-grid="test"