We Keep Coding

Bulma hoverable dropdown doesn't show

js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?

In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>

How to auto select a radio button in a carousel in angular

in my angular app I am using npm-hm-carousel. I need to auto select the field in the middle of the carousel like in the photo.
But also i need to bind one of the ids to the selected item, when i scroll the carousel.
<ngx-hm-carousel [(ngModel)]="currentIndex" [show-num]="3" [infinite]="infinite" [drag-many]="true"
[aniTime]="200" [data]="selectedServiceObj.packages" class="carousel c-accent">
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer" ngx-hm-carousel-item
*ngFor="let package of selectedServiceObj.packages; let i = index"
[ngClass]="{'visible': currentIndex===i}">
<div class="package">
<div class="well">
<div class="row header-part">
<div class="col-sm-2">
<input type="radio" name="package" [value]="package._id" [checked]="i===currentIndex" [(ngModel)]="inputSelectedPackageId" (change)="changed($event)">
</div>
</div>
</div>
</div>
</article>
<ng-template #infiniteContainer></ng-template>
</section>
<ng-template #carouselContent let-package let-i="index">
<article class="item cursor-pointer" [ngClass]="{'visible': currentIndex===i}">
</div>
</article>
</ng-template>
<ng-template #carouselPrev>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>
</div>
</ng-template>
<ng-template #carouselNext>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-right" aria-hidden="true"></i>
</div>
</ng-template>
<!-- <ng-template #carouselDot let-item>
<div class="ball bg-accent" [class.visible]="item.index === item.currentIndex"></div>
</ng-template> -->
</ngx-hm-carousel>
but in this way the value is not setting to the [(ngModel)] directive. I think it is because the radio icon is not clicking. but when i use the below code fragment for select the radio button manually, the [value] binds to [(ngModel)]
<input type="radio" name="package" [value]="package._id" [checked]="" [(ngModel)]="inputSelectedPackageId">
Thank you!

as i know we can't bind a value to a radio button. Since the clicked state won't change in a radio button. But it is good if you can use checkbox. you ll able to bind values to a checkbox and identify the state change

Angular 2+ - Adding DOM elements dynamically in HTML FORM

I am trying to create a page which users can use to create custom forms. I will be giving the user a drop-down menu. From that drop-down menu, user will be able to select the type of question - like text box, radio button, check box, date and etc. - and then based on that selection, I want to add that type of input into my DOM form.
On submit, I want to store the value of these questions in JSON format.
Any suggestions? What is best approach to tackle this or how I can implement it?

You don't need any package, the best way to do this is like this:
<div ngbDropdown class="nav-item dropdown cursor">
<a class="nav-link" ngbDropdownToggle>
DropDown
</a>
<div ngbDropdownMenu class="dropdown-menu">
<a class="dropdown-item" (click)="option1 = !option1">
Form 1
</a>
<a class="dropdown-item" (click)="option2 = !option2">
Form 2
</a>
</div>
</div>
<form #form="ngForm">
<div class="form-option1" *ngIf="option1Selected">
<!-- YOUR FORM 1 -->
</div>
<div class="form-option2" *ngIf="option2Selected">
<!-- YOUR FORM 2 -->
</div>
...
<button type="submit"></button>
</form>
And them in your component:
option1 = "false";
option2 = "false";
The doc of *ngIf is here

Have a look at ng-dynamic-forms. I've used it on a project before and it really helped creating forms dynamically.
It even provides an import / export functionality which you could use to store the form/questions including the provided answers in JSON format.
sidenote: I am in no way connected to the mentioned project.

EDIT: I feel an example like in this stackblitz shows how much control you have in terms of dynamic forms with the basic Angular utilities.
https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.html
Reactive Forms are your answer. There is no perfect way to do what you want. But I picked out a particular piece of an example from an old project. So, on one point I check for the type of comparators I have available due to my first choice. After that I check if I need a field that requires a simple input field or a datepicker. There are SO many ways to do this.
<div class="col-7">
<!-- Text Input Field for most cases that don't involve time comparisons -->
<div *ngIf="!doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
<div class="string-input-field" formArrayName="values">
<div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">
<div class="input-group">
<input formControlName="value" type="text" class="form-control py-0" placeholder="Search for...">
</div>
</div>
</div>
</div>
<!-- Date Input Field -->
<div *ngIf="doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
<div class="string-input-field row" formArrayName="values">
<div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">
<div *ngIf="j === 0" class="input-group mb-3">
<input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
[owlDateTime]="dt3">
<owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>
<div class="input-group-append">
<span class="input-group-text" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px" id="date-for-input">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
<div *ngIf="j === 1" class="input-group mb-3">
<input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
[owlDateTime]="dt3">
<owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>
</div>
</div>
</div>
</div>
</div>

Why is this div completely invisible to jQuery?

I have this div (the topmost one in the markup below) in my HTML code that I'm trying to find via jQuery .children(). For some reason jQuery just can't find it.
This can be tested by running this:
$($('<p class="info-item"><span class="info-item-key">Gender:</span><span class="info-item-value">Male</span><span class="info-item-edit-button"> <a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a></span><div class="form-inline info-item-edit-input"><div class="form-group"><div class="input-group"><input type="text" class="form-control" value="" /><div class="input-group-addon"><a class="black-link info-item-edit-save-link"><i class="fa fa-check"></i></a></div></div></div></div></p>')[0]).children()
Here is the same markup contained in that code, but better formatted:
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>
For context, I'm trying to use jQuery to show the edit form when the edit button is clicked.
Is there any reason why this div seems to be invisible to jQuery? .contents() can't find it either. (Try it.)
If it helps, that div is initially hidden with display: none in CSS, but even trying it in a JS console session attached to a document that doesn't have that CSS results in the div not being found either. (Try it in the StackOverflow JS console, or any other site, if you want.)

That's because the markup is invalid. div can't be child of a p element. p element can only have phrasing content.
Consider this simple example:
$('<p><div></div></p>');
This is how my Chromium browser renders the above markup:
<p></p><div></div><p></p>

The following fiddle shows you how to access the div you are looking for. I added some text within the div so you can see the alert.
https://jsfiddle.net/xw9Lteww/1/
JS
$(document).ready( function() {
alert($(".form-inline").text());
});
HTML
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
hey
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>

Getting the current value of an xeditable checkbox while form is being edited

I would like to have a checkbox to be displayed if another checkbox is checked, but only have this when the form is being edited. Since the model doesn't get updated when it's being edited, I can't ng-show the second checkbox based on the model's value.
tl;dr: getting value of xeditable checkbox during editing form
This is the html that I'm currently using:
<div class="col-xs-1 pad-xs text-center">
<span editable-checkbox="field.left">
<span class="fa fa-check" ng-if="field.left"></span>
</span>
</div>
<div class="col-xs-1 pad-xs text-center">
<span editable-checkbox="field.right" ng-show="~~here~~">
<span class="fa fa-check" ng-if="field.right"></span>
</span>
</div>
I can add e-ng-change to the first checkbox to determine the change, but I have no way of retrieving the value correctly.

Oh, I think I figured it out.
If you pass this to a function, the $data parameter will reflect the current value of the checkbox.
<div class="col-xs-1 pad-xs text-center">
<span editable-checkbox="field.left" e-ng-change="changeField(this, field)">
<span class="fa fa-check" ng-if="field.left"></span>
</span>
</div>
<div class="col-xs-1 pad-xs text-center">
<span editable-checkbox="field.right" e-ng-show="field._left">
<span class="fa fa-check" ng-if="field.right"></span>
</span>
</div>
In my changeField function, I'm using this
$scope.changeField = function(self, field) {
field._left = self.$data;
};