CODEWITHSUNDEEP
jqueryhtmltypescriptangular5
flash
flash

Reputation: 1517

on click events not working properly in Angular 5

I have a screenshot below which I have replicated in HTML/CSS.

enter image description here

I have created the fiddle for the above screenshot. The fiddle is working in a way that when I hit on items waiting text, it changes into items received text and vice-versa.

Now, I have used the code mentioned in the fiddle in my angular component. The snippets of the angular component which I have used in my code is shown below:

HTML:

<tr>
   <td class="left">Fred Doe's Guest 1</td>
   <td class="number1">250</td>
   <td class="table1">2</td>
   <td class="right-itemswaiting" (click)="textChange()">
      <div class="fold" data-filled="true">
         <div class="square white"></div>
         <span class="items-text">Items Waiting</span>
      </div>
   </td>
</tr>

Typescript:

export class AdminManageAttendeesComponent implements OnInit 
{
constructor() { }
ngOnInit() {
}


textChange(){    
$(document).on('click', '.fold', function(e) {
var filled = !($(this).data('filled'));
$(this).data('filled', filled);
$(this).find(".items-text").text(filled ? "Items Waiting" : "Items Received");
$(this).find(".square").toggleClass("white", filled);
});
}
}

Problem Statement:

The above fiddle is working perfectly fine but when I used it in my angular component, the text change happens on double click but in the fiddle it happens on a single click.

I am not sure how to make fiddle in angular otherwise it would be easier for me to show whats going on exactly.

I am wondering what changes I need to make in my code above so that the text change happens on a single click.

Upvotes: 3

Views: 1187

Answers (2)

Vega
Vega

Reputation: 28708

My take on this without jquery would be like this:

   <td class="right-itemswaiting" (click)="filled=!filled">
      <div class="fold" data-filled="true">
         <div class="square" [class.white]="!filled"></div>
         <span #text class="items-text">{{this.filled ?'Items Received': 'Items Waiting'}}</span>
      </div>
   </td>

The text can be optimised with a method, of course.
DEMO

Upvotes: 2

Anjil Dhamala
Anjil Dhamala

Reputation: 1622

That implementation is as far from angular as possible.

Do something like this: I'm going to add some pseudocode.

<checkbox [(ngModel)]="isReceived" (ngModelChange)="someFun()"></checkbox>
<label> {{isReceived ? 'Items Received' : 'Items Waiting'}}</label>

in your typescript file,

isReceived: boolean;

constructor() {
   this.isReceived = initializeLogic() || false;
}

initializeLogic(): boolean {
    //if you want to initialize it any other way.
}

someFun() {
//do any other logic (not UI) associated with model change.
}

While you are at it, I'd suggest checking out the angular tutorial to get more familiar with the framework.

Upvotes: 1

Related Questions