Is you see the examle so what i want is when i click on top FEMALE this need to check all box the same now, but i dont want the name inside the input ho i can do? Thanks
Here is the example:
https://stackblitz.com/edit/angular-rspagz
https://dgf1hw.run.stackblitz.io/
<ng-select
[items]="people"
[multiple]="true"
bindLabel="name"
groupBy="gender"
[selectableGroup]="true"
[selectableGroupAsModel]="true"
[closeOnSelect]="false"
bindValue="id"
[(ngModel)]="selectedPeople">
<ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" (click)="test(item.gender)" [ngModel]="item$.selected" [ngModelOptions]="{ standalone : true }"/> {{item.gender | uppercase}}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/> {{item.name}}
</ng-template>
</ng-select>
Related
Are you guys ok? In the photo below, when I click on the "I am Brazilian" checkbox, the field below filled with the "CPF" would completely not erase it. At the moment it only erases 1 digit which is the last one, how can I do it? Below is the html code.
Photo Example
<mat-step [stepControl]="personalData" [editable]="true">
<form [formGroup]="personalData">
<ng-template matStepLabel>{{'account.signUp.personalData' | translate }}</ng-template>
<p class="stepper-title">{{'account.signUp.personalData' | translate }}</p>
<div class="wrapper-hint">
<input class="input" formControlName="name" [placeholder]="'account.signUp.fullName' | translate" required>
<div class="not-match absolute" *ngIf="this.personalData?.controls?.name?.invalid && this.personalData?.controls?.name?.value">
{{ 'account.signUp.hint.name' | translate }}
</div>
</div>
<div class="radio-group-signup">
<mat-checkbox formControlName="isBrazilian" [(ngModel)]="isBrazilianCheck" color="primary">
{{ 'account.signUp.brazilian' | translate }}
</mat-checkbox>
<mat-radio-group formControlName="person" selected>
<mat-radio-button *ngIf="isBrazilianCheck" class="small-label" [value]="true">{{ 'account.signUp.naturalPerson' | translate }}</mat-radio-button>
<mat-radio-button *ngIf="isBrazilianCheck" class="small-label" [value]="false">{{ 'account.signUp.legalEntity' | translate }}</mat-radio-button>
</mat-radio-group>
</div>
<div class="wrapper-hint">
<input matInput class="input" formControlName="cpg" [mask]="isBrazilianCheck ? (personalData?.value?.person ? '000.000.000-00' : '00.000.000/0000-00') : ''"
[showMaskTyped]="true" [placeholder]="'account.signUp.insertPassport' | translate" required>
<div class="not-match absolute" *ngIf="(personalData?.controls?.cpg?.invalid && personalData?.controls?.cpg?.value)">
{{ 'account.signUp.hint.identification' | translate }}
</div>
You should replace the string with an empty one. At the place where you now have the code to remove the last digit.
I created a method inside the component.ts and in the html I put it in the check-box container.
signup.component.ts
public clearInput(): void {
this.personalData.patchValue({cpg: ''});
signup.component.html
<mat-checkbox formControlName="isBrazilian" [(ngModel)]="isBrazilianCheck" color="primary" (change)="clearInput()">
{{ 'account.signUp.brazilian' | translate }}
</mat-checkbox>
That solved my case.
<ngx-datatable-column [width]="24"
[sortable]="true"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>
<ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
<ng-template let-column="column" ngx-datatable-header-template>
<ng-container>
<div ngbTooltip="Click on the word 'Name' to change the sort direction of the student list">
{{column.name}}
</div>
</ng-container>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
<div>
{{value}}
</div>
</ng-template>
</ngx-datatable-column>
This is part of my code. I needed to use a ngbTooltip, which works, for the column header, but when I hover the bubble gets cut off by the datatable. How can I prevent it from getting cutoff?
<ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
<ng-template let-column="column" ngx-datatable-header-template>
<ng-container>
<div container="body" ngbTooltip="Click on the word 'Name' to change the sort
direction of the student list">
{{column.name}}
</div>
</ng-container>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
<div>
{{value}}
</div>
</ng-template>
</ngx-datatable-column>
By adding container="body" to the div with the tooltip it allowed the tooltip window to pop over the borders of the ngx-datatable.
Side note: in my research I found that for ngbTooltip you can add tooltipClass="className" to customize the tooltip window.
Please go through the link(https://ng-select.github.io/ng-select#/multiselect-checkbox) to know ng-select multi select checkbox.
I am trying to use the ng-select "Group selects children" in my angular 6 application.
I am having problem using ng-select "Group selects children" with Reactive Forms instead of template driven forms.
I have tired it as
<ng-select
[items]="userGroupsList"
[multiple]="true"
bindLabel="name"
groupBy="gender"
[selectableGroup]="true"
[selectableGroupAsModel]="false"
[closeOnSelect]="false"
bindValue="id"
formControlName="userGroups" placeholder="Select a user group">
<ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupParent"/> {{item.gender | uppercase}}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupChild"/> {{item.name}}
</ng-template>
</ng-select>
I have used the same data of the multiselect-checkbox-- [items]="userGroupsList"
https://github.com/ng-select/ng-select/blob/master/demo/app/shared/data.service.ts -- getMockPeople() has the data
So here can i use the [(ngModel)] as well as formControlName on the input how can i child elements are selected when the parent is select as in the example
Please help....!
To make this work with formGroup : keep the formControlName on the ng-select who will be bind to your formGroup.
The problem is those input in the template. For me the best solution is to keep using ngModel like in the example. But you must make angular understand that is as nothing to do with the fromGroup so you can add the option standalone on it.
<input id="item-{{index}}" type="checkbox" [(ngModel)]="item$.selected" [ngModelOptions]="{ standalone : true }" />
There is an other way to do that without the ngModel :
<input id="item-{{index}}" type="checkbox" [checked]="item$.selected" />
My dropdown item was not getting selected on clicking the item in the dropdown, it was only getting checked on clicking on the checkbox. This worked for me thanks
I am trying to write a dropdown list for selecting country, is possible to add flag of country next to the country name??
<div class="chosen-input-group col-sm-10 ">
<select id="country_type" chosen data-placeholder="-- 國家 --" disable-search="false"
ng-options="country_.country_id as country_.name for country_ in vm.country_data"
ng-model="vm.item.country_id">
<option value=""> -- 國家 --</option>
</select>
</div>
You could use ng-repeat on the option tag and then style the option with the image as you want it
<select >
<option ng-repeat="country_ in vm.country_data"
value="country_.country_id"
style="background-image:url({{country_.name}}.png);">
{{ country_.name }}
</option>
</select>
It is not possible using a native select with options.
Have a look to https://github.com/angular-ui/ui-select
Soruce : Angular select with images
I added the icon directly to the ng-template tag, and it works:
<ng-select [clearable]="false" [searchable]="false" [items]="items" bindLabel="libelle" [(ngModel)]="selectedItem">
<ng-template ng-label-tmp let-item="item">
<i class="fa fa-eye"></i>
<b> {{item.libelle}}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<i class="fa fa-eye"></i>
<b> {{item.libelle}}</b>
</ng-template>
</ng-select>
I have this carousel. Each item in the carousel has a checkbox above it. I want to be able to click on item and the checkbox gets a checked attribute. The code does this. The only problem I'm having is it toggles all check boxes in the carousel. I just want it to toggle the one clicked.
<tshq-carousel [dataSource]="brands" [selections]="selectedBrands" (select)="onItemsSelected($event)" [changeKey]="changeKey" [pageSize]="5" [circular]="false"
[enableSelection]="true" mode="single">
<ng-template let-brand>
<ng-container [ngSwitch]="brand.icon&&brand.icon.length>0">
<ng-container *ngSwitchCase="true" >
<label class="apply carousel-checkbox">
<input type="checkbox" id="brandCheck" [checked]="isChecked" value="no" name = "brand">
</label>
<img [src]="formatLogo(brand.icon)" style="max-width:150px" (click)="isChecked = !isChecked" />
</ng-container>
</ng-container>
</ng-template>
</tshq-carousel>
You use isChecked variable to binding to all input checkbox of carousel, so when you change value (check or uncheck) 1 input checkbox, it also set to all remain ones.
I suggest you add 1 property to model brand and use it to binding to input checkbox or image.
Ex:
<tshq-carousel [dataSource]="brands" [selections]="selectedBrands" (select)="onItemsSelected($event)" [changeKey]="changeKey" [pageSize]="5" [circular]="false"
[enableSelection]="true" mode="single">
<ng-template let-brand>
<ng-container [ngSwitch]="brand.icon && brand.icon.length>0">
<ng-container *ngSwitchCase="true" >
<label class="apply carousel-checkbox">
<input type="checkbox" id="brandCheck" [checked]="brand.isChecked" value="no" name="brand">
</label>
<img [src]="formatLogo(brand.icon)" style="max-width:150px" (click)="brand.isChecked = !brand.isChecked" />
</ng-container>
</ng-container>
</ng-template>
</tshq-carousel>