Trying to execute a function from html in Angular 8

Question

I'm working with Angular 8 and when I press a button need to execute a javaScript function but that doesn't work.

I have a method that I found here how to import external javaScript.

The objetive of the button is to hide a navbar.

I have the code like this:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery'

@Component({
  selector: 'app-home-admin',
  templateUrl: './home-admin.component.html',
  styleUrls: [
    './home-admin.component.css',
    './Style/style.css'
  ]
})
export class HomeAdminComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.loadScript('https://code.jquery.com/jquery-1.12.0.min.js');
    this.loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
    this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js');

  }

  public loadScript(url: string) {
    const body = <HTMLDivElement>document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }

  click($event) {

    $('#sidebarCollapse').on('click', function () {
      $('#sidebar, #content').toggleClass('active');
      $('.collapse.in').toggleClass('in');
      $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
  }

}


<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
    </head>

    <body>
        <div class="wrapper">
            <nav id="sidebar">
                <div class="sidebar-header">
                    <h3 align="left">CHROMAE PROJECT</h3>
                </div>
            </nav>
            <div id="content">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button class="btn btn-info navbar-btn" type="submit" (click)="click($event)">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>MENÚ</span>                               
                            </button>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </body>
</html>

I try to put the function into the html but it doesn't work.

Can anyone help me?

I recommend you go back to the tutorial at angular.io as you seem to have some large gaps that can't be covered in an SO answer — bryan60
– bryan60, Commented Mar 23, 2020 at 17:27
Why use jQuery with Angular for a so simple thing?You can achieve this just using Angular features. +1 to remove jQuery as@mwilson said — Tzimpo
– Tzimpo, Commented Mar 23, 2020 at 17:30
here angular.io/guide/user-input you can see how to add events in your html elements. — Oscar Velandia
– Oscar Velandia, Commented Mar 23, 2020 at 17:31
Add a click event listener to the button based on which you can toggle a variable that can control the hiding/displaying of your navbar. — Nicholas K
– Nicholas K, Commented Mar 23, 2020 at 17:32

mwilson · Accepted Answer · 2020-03-23 17:40:01Z

2

As mentioned in the comments, you don't want to use jQuery for this. It is a huge anti-pattern on the entire reason why someone would go with Angular in the first place.

In your case, you need to first remove all your jQuery code and bind the (click) event to an actual method in your Component.

Secondly, Angular Components are made from HTML Fragments, not a full on HTML Document. With that being said, you can omit html tags.

Lastly, do not load scripts by inserting them into the DOM like you are doing. If you need an external library, install it via ng add or npm install and load it into your code by import statements. If you don't do this, it will not be able to picked up by webpack.

Here's an example of what your code should look like:

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-home-admin',
  templateUrl: './home-admin.component.html',
  styleUrls: [
    './home-admin.component.css',
    './Style/style.css'
  ]
})
export class HomeAdminComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
  myClickEvent(evt: MouseEvent): void {
    alert('The button was clicked');
  }

}

<div class="wrapper">
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3 align="left">CHROMAE PROJECT</h3>
    </div>
  </nav>
  <div id="content">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button class="btn btn-info navbar-btn" type="submit" (click)="myClickEvent($event)">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>MENÚ</span>                               
                            </button>
        </div>
      </div>
    </nav>
  </div>
</div>

You should go spend a couple hours working through the Angular Tour of Heroes example. It will cover some of these fundamental concepts.

answered Mar 23, 2020 at 17:40

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

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

4 Comments

RAZVAN LISMANU Over a year ago

Ok, i undestand what you saying about not using javaScript like that, but how can i hide that sidebar executing myClickEvent ??

mwilson Over a year ago

What exactly are you trying to do inside the click event?

RAZVAN LISMANU Over a year ago

Im trying to remove the navbar and move the button on left side. i put screenShoot

mwilson Over a year ago

You need to put your screenshot in your question. You provided your screenshot as an answer which it is not. But, you want to use ngClass for your use case. That gives you the ability to apply a class based on a condition

Collectives™ on Stack Overflow

Trying to execute a function from html in Angular 8

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