I've got a problem with my ngSwitchCase. Well the problem is that the case doesn't correctly fulfill its job. When I drag and drop a textbox, a textbox should appear. But When I drop the textbox, I get a textbox and textarea, which is another ngSwitchCase. Does anyoneknow what I'm doing wrong, because I can't seem to figure it out.
formadd.component.html
<fieldset class="element">
<legend class="voeg-element" placeholder="voeg element toe" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)">
<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
<div *ngSwitchCase="Textbox">
<input kendoTextBox>
</div>
<div *ngSwitchCase="Textarea">
<textarea kendoTextArea></textarea>
</div>
<div *ngSwitchDefault>{{item}}</div>
</div>
</legend>
</fieldset>
panelwrapper.component.html
<kendo-panelbar class="panelbar">
<kendo-panelbar-item class="panelbar-een" [title]="'Elementen'" cdkDropList cdkDropListSortingDisabled>
<kendo-panelbar-item class="panelbar-twee" [title]="'Categorie'" icon="custom-icon" cdkDrag [cdkDragData]="'Categorie'"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-drie" [title]="'Textbox'" icon="textbox" cdkDrag>
<kendo-textbox-container floatingLabel="Text Box 1">
<input kendoTextBox placeholder="test" *cdkDragPreview/>
</kendo-textbox-container>
</kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vier" [title]="'Textarea'" icon="textarea" cdkDrag [cdkDragData]="'Textarea'"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vijf" [title]="'Date'" icon="calendar-date" cdkDrag [cdkDragData]="'Date'"></kendo-panelbar-item>
</kendo-panelbar>
This is what I see when I drop the textbox into the fieldset:
You will need to use single quotation marks inside of a *ngSwitchCase.
E.g:
<fieldset class="element">
<legend class="voeg-element" placeholder="voeg element toe" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)">
<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
<div *ngSwitchCase="'Textbox'">
<input kendoTextBox>
</div>
<div *ngSwitchCase="'Textarea'">
<textarea kendoTextArea></textarea>
</div>
<div *ngSwitchDefault>{{item}}</div>
</div>
</legend>
</fieldset>
Related
in my angular application i have a list of schedule objects in schedule array that are displayed using ngFor.
i want that whenever i click the checkbox on the left of my schedule box that particular schedule is selected as current schedule and rest is set to false .
i also want that my default selected schedule is the one that is most recently added to the array.
here is my HTML code
<div class="Box" *ngFor="let schedule of availableSchedules">
<div class="row width100">
<div class="col-md-1">
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
</div>
<div class="col-md-11">
<div class="row width100" style="font-size: larger;">
<div class="col-md-4">
From : <span>{{schedule.startTime}}</span>
</div>
<div class="col-md-4">
To : <span>{{schedule.endTime}}</span>
</div>
<div class="col-md-2"></div>
</div>
<label for="days" style="font-size: larger;">Days</label>
<div class="row" name="days" style="margin-top: 5px;padding-left: 5px;">
<span class="chip" *ngFor="let day of schedule.days">{{day}}</span>
</div>
</div>
</div>
</div>
here is my ts code
currentSchedule = new tutorAvailablitySchedule();
availableSchedules: tutorAvailablitySchedule[] = [];
selectSchedule(schedule:tutorAvailablitySchedule) {
this.currentSchedule = schedule;
console.log(event);
}
That you should do the job:
<input type="checkbox"
[ngModel]="schedule===currentSchedule"
(ngModelChange)="selectSchedule($event ? schedule : null)" />
If you need to prevent an empty selection, you should use a radio button instead. In that case, you don't event need to define the selectSchedule function:
<input type="radio" name="schedule"
[value]="schedule"
[(ngModel)]="currentSchedule"/>
I have list of values in div with parent and child relation ship. When I toggle any specific parent record, all the child records associated with other parents also gets opened. I bind this div from service (API)
Please find the sample code used for the above function
<div class="table rts-table-parentChild" *ngFor="let userRole of userRoleActions; let i = index">
<div class="table-row table-header">
<div class="table-cell">
<span *ngIf="userRole.userRoleSubActions.length" id="section{{userRole.actionName}}"
class="margin-right-5 fa fa-plus-circle" role="button"
tabindex="0" [ngClass]="[clickPlus === false ? 'fa fa-plus-circle' : 'fa fa-minus-circle']" (click)="clickPlus=!clickPlus"></span>
{{userRole.actionName}}
</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekCreate{{userRole.actionName}}" [(ngModel)]="userRole.isCreateChecked"
(click)="selectParentRole(i,'create')">
</div>
<div class="table-cell">
<input type="checkbox"[ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekDelete{{userRole.actionName}}" [(ngModel)]="userRole.isDeleteChecked"
(click)="selectParentRole(i,'delete')">
</div>
</div>
<ng-container *ngIf="clickPlus">
<div style="display:table-row-group;" *ngFor="let item of userRole.userRoleSubActions; let j = index">
<div class="table-row ">
<div class="table-cell" class="subj"> {{item.actionName}}</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
[(ngModel)]="item.isCreateChecked" (change)="isCreateChecked(i,'create')">
</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
[(ngModel)]="item.isDeleteChecked" (change)="isCreateChecked(i,'delete')">
</div>
</div>
</div>
</ng-container>
Hi because are toggle on variable clickPlus That's why specific parent record, all parent record is togged. So you have to add
show:boolen
in model of userRoleActions and in click event you can toggle like
(click)="userRole.show=!userRole.show"
Hope you understand my point may this will help you.
I have a checkbox inside a ng-template that is called by a ngbpopover. The checkbox is shown, but, I can't checked or unchecked the checkbox. But, it works when coded it in the stackblitz.
Stackblitz code -
https://stackblitz.com/edit/angular-4ueruh?file=src%2Fapp%2Fpopover-triggers.html
<div class="container sr-get-your-text">
<div class="row">
<div class="col-12">
<!-- Page title -->
<sr-title [value]="content.title"></sr-title>
<!-- Reading name and author -->
<div class="get-your-text-subtext" [innerHtml]="content.subText"></div>
<div class="sr-path-selection">
<button
*ngFor="let option of options; trackBy : trackEntryItems"
[attr.aria-label]="option.label"
[value]="option.name.toLowerCase()"
[innerText]="option.name"
[ngClass]="{'sr-path-selected': option.selected}"
[ngbPopover]="(option.name.toLowerCase() === 'anthology') && !showAgainCheck && popContent"
placement="top"
#popoverCheckbox="ngbPopover"
(click)="onPathSelect(option)"></button>
</div>
<!-- Recommendation -->
<div class="recommendation" [innerHtml]="content.recommendation"></div>
<button srPrimaryButton
*ngIf="isOptionSelected"
[isButtonBar]="true"
(click)="onContinue()">Continue
</button>
</div>
</div>
</div>
<ng-template #popContent>
<form [formGroup]="showAgainForm" #frm="ngForm">
<div class="form-check" (mouseleave)="onHoverOutside()">
<input
id="showAgain"
formControlName="showAgainCheckBox"
class="form-check-input"
type="checkbox"
[checked]="showAgainCheck"
(click)="onChanged(frm)">
<label for="showAgain" class="form-check-label">Show Again</label>
</div>
</form>
</ng-template>
expected to be able to check the checkbox.
Result is it's not accessible.
I have a component that is being for-looped. When I click one (app-product-card), I want its corresponding checkbox to be true or checked. How do I do that? I have this html
<div class="list-content fluid">
<div class="products-cards" *ngFor="let product of dataSource['docs']">
<div class="ui checkbox">
<input class="singleCheckbox" type="checkbox" [checked]="product">
<label hidden></label>
</div>
<app-product-card [product]="product" (click)="select(product)"></app-product-card>
</div>
</div>
You use local reference of child component like I did below:
<div class="list-content fluid">
<div class="products-cards" *ngFor="let product of dataSource['docs']">
<div class="ui checkbox">
<input class="singleCheckbox" type="checkbox" [checked]="appProduct.product===product"> // Here you need match your currently selected product
<label hidden></label>
</div>
<app-product-card #appProduct [product]="product" (click)="select(product)"></app-product-card>
</div>
</div>
App Product Comp: TS
public product;
select(product){ this.product = product;}
I use an input text to put text in div. When I write something in the input and I press the key Enter, the text from the input field is added to a div just below and normally, an array should be updated in my controller with the new value. I don't know how can I get the list of element text added to the div from a controller.
I'm trying to use the property n-change on my div with ng-model but it doesn't work.
<div class="row center" id="searchD" >
<form id="search" >
<input type="text" id="searchInput" onchange="createTag($(this).val());"/>
</form>
</div>
<div class="row center" ng-controller="Mainctrl">
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
</div>
</div>
You could do it something like below if that is what you are expecting.
Html :
<div class="row center" id="searchD" ng-controller="Mainctrl">
<form id="search" >
<input type="text" id="searchInput" ng-model="tagInput" ng-change="addTag()"/>
</form>
</div>
<div class="row center">
<div id="tagContainer" ng-repeat="tag in tagList">{{tag}}
</div>
</div>
Mainctrl:
$scope.tagList = [];
$scope.addTag = function () {
$scope.tagList.push($scope.tagInput);
$scope.tagInput = '';
}
Are you asking how to get data from the controller onto the html page? If so, you just use angular interpolation {{ someData }}
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
{{ tagList }}
</div>