Replacing URLs in Typescript using Ionic 3 and Angular

Currently facing some difficulties getting this simple task to work...

Here is the URL format I am dealing with:

https://website.com/image{width}x{height}.jpg

My objective is to replace the {width} and {height} placeholders.

I attempted using this function, but it keeps throwing an error message:

placeThumb(thumb:String){
  thumb = thumb.replace('{width}', '300');
  thumb = thumb.replace('{height}', '150');
  return thumb;
}

The error message I consistently receive is:

Uncaught (in promise): TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined at PlayerPage.webpackJsonp.109.PlayerPage.placeThumb (http://localhost:8100/build/main.js:202:23)
at Object.eval [as updateRenderer] (ng:///AppModule/PlayerPage.ngfactory.js:166:26)
at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:15109:21)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14223:14)
at callViewAction (http://localhost:8100/build/vendor.js:14569:21)
at execComponentViewsAction (http://localhost:8100/build/vendor.js:14501:13)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14224:5)
at callWithDebugContext (http://localhost:8100/build/vendor.js:15472:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:15009:12)
at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11993:22)

It seems like a straightforward issue, but there might be something I'm overlooking.

This is how the HTML appears:

<ion-card>
  <img [src]="placeThumb(playerData.twitch_thumb)"/>
  <ion-card-content>
    <ion-card-title>
     <ion-icon name="logo-twitch" class="iconblink"></ion-icon> Streaming: {{playerData.twitch_title}}
    </ion-card-title>
    <p>
      {{ playerData.twitch_thumb }}
      {{ placeThumb(playerData.twitch_thumb) }}
    </p>
  </ion-card-content>
</ion-card>
javascriptangulartypescriptionic-framework

Answer №1

After thorough testing, it appears that all functionalities are functioning without any issues. I have attempted to recreate the problem as described but have been unsuccessful. Check out the live demo here.

Answer №2

After some investigation, I was able to resolve the issue at hand. Since this code is only required to load once during the initial page load, I found a solution by executing the function in the TS file and assigning it to a variable.

Within the .TS file, the code looks like this:

twitchThumb:any;

getPlayerInfo(){
   let twthumb = 'https://website.com/image{width}x{height}.jpg';
   this.twitchThumb = this.placeThumb(twthumb);
}

placeThumb(thumb){
   thumb = thumb.replace('{width}', '300');
   thumb = thumb.replace('{height}', '150');
    return thumb;
}

Then, in the HTML, I simply display the result using {{ twitchThumb }}

Thank you to everyone for their helpful feedback!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method to package a React application?

I am currently working on embedding a React application within a Web component's Shadow Root or an iFrame in order to create a widget for a Chatbot messenger similar to Intercom widget. The technologies I am using include: React 16.8.6 Typescript 3. ...

javascriptreactjsiframeweb-componentshadow-dom

After moving a JavaScript application to heroku, the script appears to be nonfunctional

I developed a basic javascript application using mojs, an animation library, and aimed to host it on heroku. To begin with, I attempted the "heroku create" command to deploy the original app on heroku - although the app was accessible, the script did not f ...

javascripthtmlnode.jsanimationheroku

Display a loading image as a placeholder while the Block is loading on the Viewport

Despite my extensive search for a solution to my problem, I have been unable to find one that addresses it directly. I am trying to display a "loading" image for 4 seconds before the content of the div is loaded. Unfortunately, I haven't been able to ...

javascriptjqueryhtmlviewport

What is the best way to transfer properties to a different component using the onClick event triggered by an element generated within the map function?

I am currently working on an application using react to retrieve data from a mongodb database. Within one of the components, called Gallery, I have integrated a map function to display a list of items. My goal is to implement an onClick event for each elem ...

javascriptreactjsmongodbreact-hooks

Using Angular to store image data with base64 encoding for improved caching efficiency

Imagine I have an application that showcases various restaurants in a specific city. With numerous listings, the data volume is substantial even without including any images. If I aim to provide users with quick access to this data by implementing caching ...

javascriptangularjscachinglocal-storageng-storage

The CSS property overflow-x:hidden; is not functioning properly on mobile devices despite trying multiple solutions recommended online

Seeking help on a persistent issue, but previous solutions haven't worked for me. Looking to implement a hamburger menu that transitions in from offscreen. The design appears correctly on desktop and simulating mobile, but actual mobile view require ...

javascripthtmlcss

The create document feature seems to be malfunctioning for some reason. Any ideas why it's not working properly in Firebase with Angular

I've been attempting to submit user data to the Firebase Firestore database, but I'm experiencing issues with the function that is supposed to create a new collection. Despite trying different methods, none of them seem to be working for me. I ha ...

javascriptangularfirebasegoogle-cloud-firestore

Can WikiData be accessed by providing a random pageId?

My current project involves creating a Wikipedia Search App with a 'Feel Lucky' button. I have been trying to figure out if it's possible to send a request for Wikidata using a specific pageid, similar to the code below: async function lucky ...

javascriptapicors

React: Updating a property in an array of objects causes properties to become undefined

My intention was simply to update a property within an object inside an array and then update the state of the array. However, I encountered an issue where all properties except the one that was updated became undefined. The code in question is as follows ...

javascriptreactjstypescript

Tips for retaining a chosen selection in a dropdown box using AngularJS

How can I store the selected color value from a dropdown box into the $scope.color variable? Index.html: <label class="item item-select" name="selectName"> <span class="input-label">Choose your favorite color:</span> <select id="colo ...

javascriptangularjshtmlselectionic-framework

Exploring the concept of inheriting AngularJS modules

I am intrigued by the behavior of AngularJS. I am wondering if AngularJS modules inherit dependencies from other modules. Let's consider the following structure: var PVNServices = angular.module('PVN.services', []); PVNServices.factory(&a ...

javascriptangularjsinheritance

Engaging grid connected to MySQLi database table

I am new to programming and have been diving into the world of PHP and MySQLi. I understand that the task at hand requires more expertise than what I currently possess. My project involves creating a 3x3 grid where only one square per row can be selected. ...

javascriptphpajaxmysqli

Unable to establish communication with server. Facing issues in connecting AngularJS with NodeJS

I am currently working on establishing a communication process between my server and client to receive either a "success" or "failure" response. The server is being developed using node.js with the express framework, while the client is built using angular ...

javascripthtmlangularjsnode.jsweb-development-server

"Exploring the relationship between Javascript objects and the '

function createNewRobot(robotIdentifier) { this.id = robotIdentifier; this.components = new Array(); this.gatherComponents = function() { $.getJSON('specific/url', function(data) { for(index in data.responses) { this.part ...

javascriptjqueryajaxthis

When using the TypeScript && operator, the resulting type is not determined by the second operand

Several past discussions on SO have touched upon the concept that the inferred type from && is based on the last expression. TypeScript’s failure to detect union type with an && operator Uncovering the reason behind the && opera ...

typescript

Having trouble accessing the loadTokenizer function in Tensorflow JS

As a beginner with Tensorflow.js concepts, I recently attempted to tokenize a sentence using the Universal Sentence Encoder in Javascript. You can explore more about it on Github Reference $ npm install @tensorflow/tfjs @tensorflow-models/universal-sentenc ...

javascriptnpmpackagetokenizetensorflow.js

Looking to retrieve just your Twitter follower count using JavaScript and the Twitter API V1.1?

I am trying to retrieve my Twitter follower count using JavaScript/jQuery in the script.js file and then passing that value to the index.html file for display on a local HTML web page. I will not be hosting these files online. I have spent weeks searching ...

javascripthtmlajaxsvgtwitter

having difficulties with angular subscribing to an observable

I am currently working on a service that retrieves a post from a JSON file containing an array of posts. I already have a service in place that uses HttpClient to return the contents of a JSON file. The main objective is to display the full content of the ...

angulartypescriptobservable

Having difficulties generating ngc and tsc AOT ES5 compatible code

I've explored various options before seeking help here. I have an angular2 library that has been AOT compiled using ngc. Currently, I am not using webpack and solely relying on plain npm scripts. Below is the tsconfig file being utilized: { "comp ...

angulartypescriptaot

What are the specific purposes of utilizing semantic versioning (semver) notation within the package.json file?

Could someone clarify the specific distinctions between the semver notations found in package.json file? I'd appreciate a detailed explanation. ...

node.jsangulartypescriptnpm