How can Angular 7 incorporate inline JavaScript scripts in a component?

Question

How can Angular 7 incorporate inline JavaScript scripts in a component?

I am facing an issue while trying to integrate the places.js library into my Angular 7 project. I have added the necessary script in my 'index.html' file as follows:

 <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb9b878a888e98c58198abdac5daddc5df">[email protected]</a>"></script>
  <script>
    var placesAutocomplete = places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  </script>

However, it only works when I have the following input field in my 'index.html':

<input type="search" id="address-input" placeholder="Where are we going?" />

I tried moving this input field to a component but encountered an error:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087864696b6d7b26627b483926393e263c">[email protected]</a>:1 Uncaught Error: Algolia Places: 'container' must point to an <input> element.

Is there a way to make this script work with a component? The documentation does not mention anything about TypeScript. I also attempted to use npm install and import * from 'places.js', but the problem persists. Any help would be greatly appreciated.

javascript angular typescript api algolia

Answer 1

Answer №1

It's recommended to utilize this within an Angular Component:

import { Component, OnInit } from "@angular/core";
import places from "places.js";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "my-app";

  ngOnInit(): void {
    const placesAutocomplete = places({
      appId: "appId",
      apiKey: "appKey",
      container: document.querySelector("#address-input")
    });
  }
}

Make sure to also include the following code snippet in your polyfill.js for proper functionality:

(window as any).process = {
  env: { DEBUG: undefined }
};

(window as any).global = window;

Answer 2

It's recommended to utilize this within an Angular Component:

import { Component, OnInit } from "@angular/core";
import places from "places.js";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "my-app";

  ngOnInit(): void {
    const placesAutocomplete = places({
      appId: "appId",
      apiKey: "appKey",
      container: document.querySelector("#address-input")
    });
  }
}

Make sure to also include the following code snippet in your polyfill.js for proper functionality:

(window as any).process = {
  env: { DEBUG: undefined }
};

(window as any).global = window;

Answer 3

Answer №2

Despite my best efforts, I was unsuccessful when attempting it your way.

To resolve this issue, please ensure that you download the places.js file and place it in the script folder.

Next, update the angular.json file within the builder > scripts section as shown below:

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
        "assets": [...],
        "styles": [...],
        "scripts": [
          "script/places.js"
        ]
      },

Answer 4

Despite my best efforts, I was unsuccessful when attempting it your way.

To resolve this issue, please ensure that you download the places.js file and place it in the script folder.

Next, update the angular.json file within the builder > scripts section as shown below:

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
        "assets": [...],
        "styles": [...],
        "scripts": [
          "script/places.js"
        ]
      },

Answer 5

Answer №3

To ensure proper organization, make sure to place all your Place code within a component and initialize it in the ngOnInit() lifecycle hook.

import { Component, OnInit } from '@angular/core';
import * as Places from 'places';

@Component({
  selector: 'my-app',
  templateUrl: './yourComponent.html'
})
export class AppComponent implements OnInit  {

  ngOnInit(){
    Places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  }
}

In your yourComponent.html:

<input type="search" id="address-input" placeholder="Where are we going?" />

Answer 6

To ensure proper organization, make sure to place all your Place code within a component and initialize it in the ngOnInit() lifecycle hook.

import { Component, OnInit } from '@angular/core';
import * as Places from 'places';

@Component({
  selector: 'my-app',
  templateUrl: './yourComponent.html'
})
export class AppComponent implements OnInit  {

  ngOnInit(){
    Places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  }
}

In your yourComponent.html:

<input type="search" id="address-input" placeholder="Where are we going?" />

Answer 7

Answer №4

Based on my observations, the input needs to be loaded before it is called and attached to your index. If you try to attach it before the input loads, it will not work as expected.

var placesAutocomplete = places({
  appId: 'myAppId',
  apiKey: 'myApiKey',
  container: document.querySelector('#addressInput')
});

There are a few different approaches you could take, but personally, I would create a service for this purpose, similar to the following:

declare var places:any;
@Injectable({providedIn:'root'})
export class PlacesServices {
      setup(){
        var placesAutocomplete = places({
        appId: 'myAppId',
        apiKey: 'myApiKey',
        container: document.querySelector('#addressInput')
       });
      }

}

Then, inject this service into your component and only call it when the input with the correct ID is fully loaded. Utilize ngAfterViewInit to ensure that the views are loaded correctly.

ngAfterViewInit(){
   this.placesService.setup();
  //Call the setup function here in the component containing the input
}

The JavaScript script can be either added directly to index.html or implemented as described in Hien's answer.

This response was written quickly, so there may be some typos. However, the main concept should still be clear. Hopefully, this solution works for you!

Answer 8

Based on my observations, the input needs to be loaded before it is called and attached to your index. If you try to attach it before the input loads, it will not work as expected.

var placesAutocomplete = places({
  appId: 'myAppId',
  apiKey: 'myApiKey',
  container: document.querySelector('#addressInput')
});

There are a few different approaches you could take, but personally, I would create a service for this purpose, similar to the following:

declare var places:any;
@Injectable({providedIn:'root'})
export class PlacesServices {
      setup(){
        var placesAutocomplete = places({
        appId: 'myAppId',
        apiKey: 'myApiKey',
        container: document.querySelector('#addressInput')
       });
      }

}

Then, inject this service into your component and only call it when the input with the correct ID is fully loaded. Utilize ngAfterViewInit to ensure that the views are loaded correctly.

ngAfterViewInit(){
   this.placesService.setup();
  //Call the setup function here in the component containing the input
}

The JavaScript script can be either added directly to index.html or implemented as described in Hien's answer.

This response was written quickly, so there may be some typos. However, the main concept should still be clear. Hopefully, this solution works for you!

How can Angular 7 incorporate inline JavaScript scripts in a component?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Swapping XML tag names in Node.js

Find the difference in weeks between two dates using MongoDB aggregate

Experiencing difficulties integrating react-moveable with NEXTjs: Error encountered - Unable to access property 'userAgent' as it is undefined

Capturing a still image from a video stream with opentok

Calling an API twice in Angular Universal SSR - once from the frontend and the other from the backend

In React, the state of the "interval" component remains constant

Guide to using get() and res.sendFile() function to redirect webpages

Each page in NextJS has a nearly identical JavaScript bundle size

When attempting to open a native app using JavaScript, it fails to function properly. However, the same code successfully opens the

Launching Node.js + Express on the server

When utilizing the catch function callback in Angular 2 with RxJs, the binding to 'this' can trigger the HTTP request to loop repeatedly

Testing the window object using Jest

Changing buffer from base64 to UTF-8 encoding in Node.js

Showing text on an ajax loader

incapable of destructuring two objects simultaneously

Glistening: sending reactiveValues to conditionalPanel

Steps for calling a function in index.js using Node.js

The jQuery ajax function seems to be malfunctioning when attempting to send a post request

Unable to successfully inject a template into the parent state using ui-view

What could be causing the data in getServerSideProps to be altered?