What is the best way to access the Ngmodel value from a different file in order to showcase its content?

As a beginner in Angular and TypeScript, I am facing an issue with displaying the value of an input field (phone number) when sending an email to the admin. The code below is not working properly and I am getting an error during continuous integration. It says "Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface." Here is the updated code:

<div class="text-input">
        <label i18n="@@phoneNumberTitle" for="phoneNumber">i18n</label>
        <input
          id="phoneNumber"
          autocomplete="off"
          placeholder="@@placeholderphoneNumberTitle"
          i18n-placeholder="@@placeholderphoneNumberTitle"
          name="phoneNumber"
          #phoneNumber="ngModel"
          [(ngModel)] = "phone_number"
          required
        />

This is the TypeScript code:

 /**
     * Call service to send notification via email to admin
      */
        phone_number:any;
       sendEmailToNotificateAdmin(user) {
         const data = {
         to: environment.adminEmail,
         cc: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5564676623273a3b153238343c397b363a38">[email protected]</a>',
         subject: 'A new user has registered',
         body: `
             A new user has registered at XYB.

              Phone Number: ${this.phone_number}

          };
        }
angularjstypescriptangular-ngmodel

Answer №1

To properly format your code, make use of template literals enclosed in backticks like so:

const age = 2;
const message = `I am ${age} years old`.

If you are currently using parentheses, be sure to switch to curly brackets instead. Ensure that within your .ts component file, there exists a variable named phone_number to store the input.

@Component({...})
export class YourComponent implements OnInit {
  phone_number: string;

  constructor() {}
   
  public ngOnInit(): void {}

  sendEmailToNotificateAdmin(user) {
     const data = {
       to: environment.adminEmail,
       cc: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4959697d2d6cbcae4c3c9c5cdc88ac7cbc9">[email protected]</a>',
       subject: 'A new user has registered',
       body: `
         A new user has registered at XYB.

           Phone Number: ${this.phone_number}
      `;
    }
  }

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

Preventing unfiltered text input in Angular UI-Select

Lib link : https://github.com/angular-ui/ui-select Is there a way to prevent user input in a multiSelect? I want users to only be able to clear previously selected data, But how can I restrict them from entering any new text in the ui-select field? http ...

angularjsui-selectangular-ui-select

How can I dynamically assign ng-model with a filter for a particular object in an array?

Is there a recommended method for linking an input element to a specific field of an object in an array using its id? I tried using ng-model along with the find() function from the array prototype. However, the implementation is not working properly as it ...

javascriptangularjs

JSON data is used to dynamically render tables in this process

I have a challenging requirement and I am in search of a dynamic solution to render it. I am reaching out to the experts for assistance with the following requirement. https://i.sstatic.net/VLBd5.jpg I am looking to display the data in the format shown a ...

angularjsjsonhtmlangularjs-factory

AngularJS: Assign a class based on a variable's value

I am working with an array of objects, each containing a color variable ('success', 'danger', 'info'). My task is to apply these colors to panels, texts, and buttons as shown below: <div class="panel" ng-class="panel-{{pan ...

angularjs

Utilizing Webpack for Effortless Image Loading in Angular HTML

I've been struggling with webpack and angular configuration. It seems like a simple issue, but I just can't seem to find the solution. Despite scouring Stack Overflow for answers, I'm still stuck. My HTML page looks like this (along with ot ...

javascripthtmlangularjswebpack

What is the best method for displaying an empty message within a table cell (td) when the ng.for loop has fewer items than the table headers

I have created a code to display data in a table format. However, I am facing an issue where the table headers (#4 and #5) do not show any data (td). How can I implement an empty message for these table headers when there is no corresponding data available ...

javascripthtmlangulartypescript

Leveraging $interval within the Angular UI Router templateProvider

I am looking to update my view template every 10 minutes. The current setup in the state config is not working as expected: .state('home', { url: '/', controller: 'landing', templateProvider: function($templateFac ...

angularjsangular-uisetinterval

Combining the powers of Rails API with AngularJS and the Websocket-Rails gem

Currently, my server is utilizing the websocket-rails gem for managing websockets. I am encountering challenges integrating websocket-rails with a phonegap project that incorporates angular. This is because I require the ability to initialize the websocke ...

ruby-on-railsangularjswebsocketrails-api

The dynamic form functionality is experiencing issues when incorporating ng-container and ng-template

I'm currently working on a dynamic form that fetches form fields from an API. I've attempted to use ng-container & ng-template to reuse the formgroup multiple times, but it's not functioning as anticipated. Interestingly, when I revert b ...

javascriptangulartypescriptangular-reactive-forms

Passing RxJs pipes as a parameter

Is there a way to pass pipes as parameters? For example: var mypipes = [ pipeA(() => { alert("a"); }), pipeB(() => { alert("b"); }) ...

angulartypescriptrxjs

What is the process for automatically initiating a service when importing a module in Angular?

I am curious about how I can automatically run a service within a module upon importing it, without the need for manual service injection and execution. This functionality is similar to how the RouterModule operates. @NgModule({ imports: [ Browser ...

angulartypescript

Flawless Incorporation with RESTful API

While there are countless tutorials online demonstrating how to utilize ng-repeat with in-memory data, my situation involves a lengthy table with infinite scroll that retrieves data through requests to a REST API (scroll down - fetch data, repeat). This me ...

angularjsangular-servicesangular-filters

Tips on how to simulate an external enum configuration in Jasmine

Currently, I am conducting a test on an AngularJS service using Jasmine. This service involves calling a function from another service where an enum from a different module is passed as a parameter. public getSavedColumns = (): ng.IPromise<GridColumn[] ...

angularjsenumsjasmine

A step-by-step guide on how to simulate getMongoRepository in a NestJS service

Struggling with writing unit tests for my service in nestjs, specifically in the delete function where I use getMongoRepository to delete data. I attempted to write a mock but couldn't get it to work successfully. Here is my service: async delete( ...

node.jsmongodbtypescriptnestjstypeorm

AngularJS - ng-change does not trigger for checkbox that toggles the class "switch"

CSS Styling: <span style="color: blue;">Hello, World!</span> JavaScript Function: function showMessage(){ alert('Hello!'); } I tried to implement a span element with blue text color. However, the function that was supposed to ...

javascriptangularjs

Angular can redirect the path to the current page

I am looking for a way to handle empty paths in my routing module by redirecting to the current page. Can someone help me achieve this? Thank you in advance. Below are the routes defined: const routes: Routes = [ { path: 'students', co ...

javascriptangulartypescript

TypeScript - Indexable Type

Here is an explanation of some interesting syntax examples: interface StringArray { [index: number]: string; } This code snippet defines a type called StringArray, specifying that when the array is indexed with a number, it will return a string. For e ...

javascripttypescriptduck-typing

Using ngFor to dynamically call functions

In my code, I have an array called 'actionsArray' which contains objects of type 'Action'. Each Action object has two parameters: the function name and a boolean value (which is currently not important). let actionsArray: Action[] = [{ ...

angulartypescript

What triggers the creation of new scopes in AngularJS?

In the world of angularJS, scopes are like a family tree with parent, child, and sibling branches. Have you ever wondered what triggers the creation of a new scope? When examining scopes using ng-inspector, we can see the $rootScope along with other myste ...

angularjs

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

javascriptnode.jstypescripttensorflowtensorflow.js