How to convert jquery code to angular 4?

Question

I have written some code using jQuery and HTML to remove a class after clicking on element. I am not able to convert it to Angular 4.

HTML code :

 <div class="collapse navbar-collapse" id="myNavbar">
 <ul class="nav navbar-nav navbar-right">
   <li><a href="#myPage" onclick="hideNavBar();"><i class="glyphicon glyphicon-home"></i>Home</a></li>
   <li><a href="#login" onclick="hideNavBar();">Login</a></li>
   <li><a href="#signup" onclick="hideNavBar();">Signup</a></li>
  </ul>
</div>

JavaScript:

function hideNavBar() {
  $("#myNavbar").removeClass('in');
}

Answer 1

template:

<div class="collapse navbar-collapse" *ngIf="test === true">
  <ul class="nav navbar-nav navbar-right">
    <li><a (click)="hideNavBar()"><i class="glyphicon glyphicon-home"></i>Home</a></li>
    <li><a (click)="hideNavBar()">Login</a></li>
    <li><a (click)="hideNavBar()">Signup</a></li>
     </ul>
</div>

.ts file:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  test = true;

  constructor() {}

  hideNavBar() {
    test = false;
  }
}

Answer 2

use [ngClass] directive to show and hide instead of ngIf.

ngIf create DOM in runtime please refer this doc ngClass

<div class="collapse navbar-collapse" [ngClass]="{'in': showClass}">
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#myPage" (click)="hideNavBar();"><i class="glyphicon 
  glyphicon-home"></i>Home</a></li>
  <li><a href="#login" (click)="hideNavBar();">Login</a></li>
 <li><a href="#signup" (click)="hideNavBar();">Signup</a></li>
</ul>
</div>

    @Component({
     selector: 'app-header',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })

  export class AppComponent {

  showClass = true;

  constructor() {}

  public function hideNavBar() { // you can use in click function
     showClass = false;
   }
}