Angular - from jquery to angular typescript

Question

There is a lot of components and directives out there that can aide when nessecary. However I would like to obtain some basic understanding of how one would go from some standard js og jquery and implementing it into an Angular component.

I have found this html, css and javascript code that I would like to transform into an Angular Component: https://foundation.zurb.com/building-blocks/blocks/table-expand.html

Here is the JS

$('[data-open-details]').click(function (e) {
  e.preventDefault();
  $(this).next().toggleClass('is-active');
  $(this).toggleClass('is-active');
});

How would i go about this? Taking this into a component.ts? And without the use of Jquery.

Thanks

Update

I need to reference my element with ViewChild and Elemenref. Here is where i am at.

export class TaskListComponent implements OnInit {
  @ViewChild("detailopen") detailopen : ElementRef;
  constructor(private rendere : Renderer2) { }

  ngOnInit() {
    let element = this.detailopen.nativeElement;
    this.rendere.listen(element, 'click', (e)=>{
      e.preventDefault();
      //Do something that open or closes the accordion
    })
  }
}

And i have a template reference element on my html element called #detailopen

Update

So i moved away from above and simply created a click event that set isActive to true or false

export class TaskListComponent implements OnInit {
  // @ViewChild("detailopen") detailopen : ElementRef;
  constructor() { }
  isActive;
  ngOnInit() {

  }
  detailopen(event: MouseEvent){
    event.preventDefault();
    this.isActive = !this.isActive;
  }

}

This will however open all content sections whenever i click one header. How can i prevent all content sections to open and just open the one that i want to target.

Angular uses Typescript and Typescript = JavaScript. So what you are looking for is to convert jQuery to JavaScript — mxr7350
– mxr7350, Commented Mar 9, 2018 at 11:34

P.S. · Accepted Answer · 2018-03-09 12:14:55Z

1

In Angular developers usually binds DOM events (and not only DOM) using (event), for example (click). And you can trigger the CSS class using ngClass easilly: [ngClass]="{'is-active': isActive}". Finally, you should get something similar to this code:

HTML:

<button (click)="doStuffOnClick($event)"
        [ngClass]="{'is-active': isActive}">
  Click
</button>

Component:

/* Imports here */

@Component({
  selector: 'app-basic',
  templateUrl: './basic.component.html',
  styles: [""]
})

export class BasicComponent {
  public isActive: boolean = false;
  public doStuffOnClick(e: MouseEvent) {
    e.preventDefault();
    this.isActive = !this.isActive;
  }
}

EDIT (based on comments):

I suggest that you want to have more than one block with displayed info and a button, so I think the best way will be to create an array of objects for every block, which will contain all necessary info including button activity boolean. And inside HTML you can iterate through that array and print every item. You also have to declare index inside *ngFor and pass this index to doStuffOnClick function, so this way you will have a possibility to get access to specific item from items array. Final code will be something like this:

HTML:

<div *ngFor="let item of items; let i = index;">
  <button (click)="doStuffOnClick($event, i)"
          [ngClass]="{'is-active': isActive}">
    Click
  </button>
</div>

Component:

/* Imports here */

@Component({
  selector: 'app-basic',
  templateUrl: './basic.component.html',
  styles: [""]
})
export class BasicComponent {
  public items: any[] = [
    {
      name: One,
      isActive: false
    },
    {
      name: Two,
      isActive: false
    },
    {
      name: Three,
      isActive: false
    }
  ];
  public doStuffOnClick(e: MouseEvent, index: number) {
    e.preventDefault();
    this.items[index].isActive = !this.items[index].isActive;
  }
}

edited Mar 9, 2018 at 12:14

answered Mar 9, 2018 at 11:45

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

K N Over a year ago

That works very well - I have just one issue. Alle contents area will open whenever i click one or another header. In the JS example Jquery is using "this" keyword to point to a specific element - how can i accomplish that?

P.S. Over a year ago

@KlausN, I have updated the answer, let me know, will it work or not.

K N Over a year ago

that really led my on the right direction. I created a field call focusedTask that would hold the ID of the clicked element. Then in my expression in my ngClass i did is-active': task.id == fokusedTask Thank you very much for your help!

P.S. Over a year ago

@KlausN, glad to help, have a nice day!

Collectives™ on Stack Overflow

Angular - from jquery to angular typescript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related