How to use Jquery with Angular?

Use Jquery with Angular

In this article I will explain with an example, how to use Jquery with Angular

For use *ngIf and *ngFor on same element, You need to use <ng-container> or <template>. both of the uses is same.

What is ng-container

<ng-container> if you need a helper element for nested structural directives like *ngIf or *ngFor or if you want to wrap more than one element inside such a structural directive;

When we use ng-container or template

Angular v6 recommend to use <ng-container> instead of <template>

<ng-container *ngFor="let navLink of navLinks">
   <li *ngIf="navLink.show">
       .....
   </li>
</ng-container>

Before Angular v6, we use <template> as a placeholder

<template *ngFor="let navLink of navLinks"  >
   <li *ngIf="navLink.show">
       .....
   </li>
</template>

Referances:

• https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular
• ttps://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9