How to use external Javascript function in Angular 2 template?

Question

I have a template in the component with 4 div tags. The JavaScript function I want to call, changeValue(), is supposed to change the content of the first div from 1 to Yes!. I'm new to TypeScript and Angular 2, so I'm not sure how I can get the template to interact with the function from dtest2.js:

 /**app.component.ts */

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

@Component({
selector: 'my-app',
template: `
  <div id="boolean"><p id="bv">1</p></div>
  <div id="numeric"><p id="nv">2</p></div> 
  <div id="string"><p id="sv">3</p></div> 
  <div id="enum"><p id="ev">4</p></div>
  `
})

export class AppComponent { }

//dtest2.js

function changeValue(){
  var newVal= "Yes!"; 
  document.getElementById("bv").innerHTML= newVal;
}

changeValue();

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="file:^html/angular/app/bs.min.js"></script>
    <script src="file:^html/dtest2.js"></script>
    
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

slaesh · Accepted Answer · 2016-08-22 18:05:35Z

2

Is there a special reason to use this external js function? It would be better to use Angular's binding methods to solve your problem..

/**app.component.ts */

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

declare function changeValues(anyArgs: string, canBeHere: string) : void;

@Component({
selector: 'my-app',
template: `
  <div id="boolean"><p id="bv">{{booleanValue ? 'Yes' : 'No'}}</p></div>
  <div id="numeric"><p id="nv">2</p></div> 
  <div id="string"><p id="sv">3</p></div> 
  <div id="enum"><p id="ev">4</p></div>
  `
})

export class AppComponent {
    booleanValue: boolean = true;

    constructor() { changeValues(...); }

    anyFunctionToChangeTheValue() {
        this.booleanValue = false;
    }
}

edited Aug 22, 2016 at 18:05

answered Aug 22, 2016 at 14:39

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

1 Comment

xdc17 Over a year ago

Sorry I edited the names of the divs. Ignore the boolean,string,etc. They are meaningless.

Ben Richards · Accepted Answer · 2016-08-22 16:30:23Z

0

Like the previous answer said, you can do this natively in Angular 2. However, here is how you can access functions outside of Angular2. You just need to declare the "window" object as a constant in your Angular component.

//our root app component
import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

const window: any = {};

@Component({
selector: 'my-app',
template: `
  <div id="boolean"><p id="bv">1</p></div>
  <div id="numeric"><p id="nv">2</p></div> 
  <div id="string"><p id="sv">3</p></div> 
  <div id="enum"><p id="ev">4</p></div>
  `
})
export class App implements OnInit {
  ngOnInit() {
    changeValue();
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Here is a working example.

edited Aug 22, 2016 at 16:30

answered Aug 22, 2016 at 14:53

Ben Richards

3,5861 gold badge18 silver badges19 bronze badges

4 Comments

xdc17 Over a year ago

I am getting a error in the terminal : File change detected. Starting incremental compilation... [0] app/app.component.ts(6,7): error TS1155: 'const' declarations must be initialized [0] app/app.component.ts(20,5): error TS2304: Cannot find name 'changeValue'.

Ben Richards Over a year ago

Yeah, this works in plnkr but it might not locally, let me see if I can create a working local example, I'lll update the answer when I have it.

xdc17 Over a year ago

I'm still getting the 'app/app.component.ts(20,5): error TS2304: Cannot find name 'changeValue' error. Is there something else perhaps wrong with my other files?

Ben Richards Over a year ago

Try calling it with "window.changeValue()" instead of just changeValue()"

Vij · Accepted Answer · 2017-02-09 21:20:53Z

-1

You can use:

import { Component,ElementRef } from '@angular/core';
constructor(private elementRef:ElementRef) {};

ngAfterViewInit() {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "./app/custom.js";
  this.elementRef.nativeElement.appendChild(s);
}

edited Feb 9, 2017 at 21:20

answered Feb 9, 2017 at 19:53

Vij

111 bronze badge

Collectives™ on Stack Overflow

How to use external Javascript function in Angular 2 template?

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related