<div *ngFor="let cus of deselectedList | keyvalue"
(click)="clickCheckBox('customer_'+cus.key+'_checkbox')">
{{cus.key}}
<mat-checkbox id="customer_{{cus.key}}_checkbox"
(change)="deselectCheck($event.checked, cus.key, cus.value)">
</mat-checkbox>
</div>
deselectedList is a map. As I have a map and am iterating through it there is no way to use [checked]. I would like to send a (change) event to the mat-checkbox based on the elements ID.
I also worry a change event will not change the visual on the checkbox itself. I was trying something like this with no success:
let box = <HTMLInputElement>document.getElementById(customer);
box.dispatchEvent(new Event("change"));
Is it possible to update the box enabled/disabled status and trigger the (change) event?
Got it:
<div id="customer_{{cus}}"
*ngFor="let cus of deselectedList | keyvalue"
(click)="checkbox.toggle(); deselectCheck(checkbox.checked, cus.key, cus.value)">
{{cus.key}}
<mat-checkbox id="customer_{{cus.key}}_checkbox" class="cus-check float-checkbox-right"
#checkbox>
</mat-checkbox>
</div>
And also add "pointer-events:none" to the css of the check box -> cus-check
Related
I would like to know how I can convert text data into individual boxes as shown in the picture each time user enters a word separated after a comma (I am currently creating this as an input field on Angular)
You can simply use a variable with ngModel and a *ngFor over this variable.split(',')
<input [(ngModel)]="name">
<ng-container *ngIf="name">
<div *ngFor="let item of name.split(',')">
{{item}}
</div>
</ng-container>
NOTE: You can use mat-chip-list in the way
<mat-chip-list *ngIf="name">
<mat-chip
*ngFor="let item of name.split(',');let i=index">
{{ item }}
<button matChipRemove>
<mat-icon (click)="remove(i)">cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
where
remove(index:number)
{
const list=this.name.split(",") //get the list
list.splice(index,1) //remove the element at position "index"
this.name=list.length?list.join(','):null //give value to name using join
}
stackblitz
NOTE: If you only need the "list" based in a variable just give value to the variable
Looks like you are looking for something like Angular Material Chips.
https://material.angular.io/components/chips/examples
what I want to do is when I check an item the div of that item appears
for example if I select Crédit bancaire and Compte courant associé.
the two divs corresponding to these items are displayed
Here is the example:
https://stackblitz.com/edit/angular-d163sn?file=src%2Fapp%2Fapp.component.ts
here is a simple workaround, try changing bindValue from id to name
and change this code
<div>
<div *ngIf=" selected == 1">Crédit bancaire</div>
<div *ngIf=" selected == 2">Compte courant Associe</div>
<div *ngIf=" selected == 3">Fonds Propres</div>
</div>
to this
<div *ngFor="let item of selected | keyvalue">
<h1>{{item.value}}</h1>
</div>
the idea is to store that object to an iterable object, but keep in mind we need to use keyValue pipe to make it work with ngFor.
I need to show data in select with two lines each. I am using ng-select.
<ng-select [(ngModel)]="selectedData" placeholder="Select Data">
<div *ngFor="let data of Data">
<ng-option [value]="data.id">
{{data.name}} - {{data.price | currency}}
{{data.description}} - {{data.code}}
</ng-option>
</div>
</ng-select>
I am using ng-select and trying to show the data in ng-option, it is showing the data in one line. already tried br and /n.
Thanks in advance.
No, you can't!
None browser will allow doing this formatting of text.
But yes you can use some another alternate for show text if needed may be using title which will show data as a tooltip.
This is not supported.
Try this instead,
Data.forEach(element => {
dropDownDataSource.push(id: element.name, value: element.name)
dropDownDataSource.push(id: element.description, value: element.description)
});
<ng-select [(ngModel)]="selectedData" placeholder="Select Data">
<option *ngFor="let data of dropDownDataSource" value="{{data.value}}">
{{data.id}}
</option>
</ng-select>
I am trying to implement a simple "hover on a comment to show a reply button" implementation in my angular application. Is there a way to achieve this effect by using template reference variables only?
Something along the lines of...
<mat-list>
<mat-list-item *ngFor="let comment of comments" #SomeRefToThisParticularElement (mouseenter)="SomeRefToThisParticularElement=true" (mouseleave)="SomeRefToThisParticularElement=false">
<h4>{{comment.text}}</h4>
<p> 3 replies </p>
<mat-icon *ngIf="SomeRefToThisParticularElement==true">reply</mat-icon>
</mat-list-item>
</mat-list>
Obviously, the above doesn't work cause angular won't let you assign or set template variables the way I have shown in the snippet above. But I would like to explore options to achieve this at the html template level.
Is this a good approach to do this?
Edit
Click here for a summary of possible solutions.
try this, Hide and show based on the hover index of an array.
<mat-list>
<mat-list-item *ngFor="let comment of comments; let i = index" (mouseenter)="commentIndex= i" (mouseleave)="commentIndex = -1">
<h4 mat-line>{{comment.text}}</h4>
<p mat-line style="font-size:x-small; color:rgba(0, 0, 0, 0.54)"> 3 replies </p>
<mat-icon *ngIf="commentIndex == i">reply</mat-icon>
</mat-list-item>
</mat-list>
Use a dynamic object to do this, like comment.isVisible. Now the isVisible object is dynamically created and it will be modify the value while hover in/out.
Please try this way
<mat-list>
<mat-list-item *ngFor="let comment of comments" (mouseenter)="comment.isVisible = true" (mouseleave)="comment.isVisible= false" >
<h4 mat-line >{{comment.text}}</h4>
<p mat-line style="font-size:x-small; color:rgba(0, 0, 0, 0.54)"> 3 replies </p>
<mat-icon *ngIf="comment.isVisible">reply</mat-icon>
</mat-list-item>
</mat-list>
Simplest Solution (Credit: Rahul Sharma) - use index of the element and set that as the value of a dynamic variable that is used within an *ngIf statement for show/hide behavior of an element.
Next Best Solution (Credit: Ramesh Rajendran) - Add a dynamic property to the iterable object. This assumes that the iterable object is not immutable.
Thanks to the respective contributors. Hope this helps someone in the future.
you can use css:
mat-icon{
color: transparent;
}
mat-icon:hover, mat-icon:active{
color:black;
}
I have a component that show/hide element by clicking a button.
This is my html
<div *ngFor="let history of histories | sortdate: '-dateModified'">
<p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
<a href="google.com"
[class.datatable-icon-right]="history.$$expanded"
[class.datatable-icon-down]="!history.$$expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(history)"></a>
<!-- hide/show this by clicking the button above.-->
<div *ngFor="let step of history.steps; let i = index">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
<hr />
</div>
and my .ts
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
//row
return false;
}
trying to search but, can't find any same sample.
On jquery, I can do this, but on Angular2, I am having hard time to figure this.
There are two options:
1- You can use the hidden directive to show or hide any element
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
2- You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.
<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
Use the ngIf in your repeated rows. Create a boolean property called showStep to indicate whether the row should be expanded or not.
<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
Then, in your .ts file:
toggleExpandRow(history) {
history.showStep = !history.showStep
//note the same porperty of showStep that is used in your html
}
Extra:
In fact, to save a few lines of codes, you don't even need the toggleExpandRow function at all. You can do it inline in your html:
//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">