Angular2's addArticle method does not exist

Whenever I click on the submit button, I see this message in the console. Can someone please guide me on how to import Moment from node_modules into an Angular2 project?

This is my app.component.html:

<form class="ui large form segment">
  <h3 class="ui header">Add a Link</h3>
  <div class="field">
    <label for="title">Title:</label>
    <input name="title" #newtitle>
  </div>
  <div class="field">
    <label for="link">Link:</label>
    <input name="link" #newlink>
  </div>
  <div>
    <button (click) ="addArticle(newtitle, newlink)" class="ui positive button">Submit link</button>
  </div>

</form>

This is my app.module.ts:

export class AppModule { 
  addArticle(title: HTMLInputElement, link:HTMLInputElement): boolean{ 
    console.log('title: ${title.value} and link: ${link.value}'); 
    return false; 
  } 
 } 

Answer №1

The addArticle method has been written in app.module.ts, but it should be moved to app.component.ts

export class AppModule { 
  addArticle(title: HTMLInputElement, link:HTMLInputElement): boolean{ 
    console.log('title: ${title.value} and link: ${link.value}'); 
    return false; 
  } 
 } 

It is recommended to move the addArticle method to app.component.ts since it is being used in app.component.html

export class AppComponent {
  title = 'Okay, proceed .!';
  names = [];
 // myDate = Date;

  constructor(){
    this.names = ['Tuan','Mark','Kevin'];
  //  this.myDate = new Date();
  }
 addArticle(title: HTMLInputElement, link:HTMLInputElement): boolean{ 
        console.log('title: ${title.value} and link: ${link.value}'); 
        return false; 
      } 
}

To import MomentModule for now, use the following:

import {MomentModule} from 'angular2-moment/module';

After running npm install angular2-moment, visit

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

Create a Bar Graph Using a List

Looking to generate an Angular Barchart from a JPA query in Spring: public List<PaymentTransactionsDailyFacts> findPaymentTransactionsDailyFacts(LocalDateTime start_date, LocalDateTime end_date) { String hql = "SELECT SUM(amount) AS sum_volume, ...

Encountering a RangeError in Angular due to exceeding the maximum call stack size after removing distinctUntilChanged() from a formControl value change subscription

In the scenario where I have a parent and a child angular component, each containing their own set of form fields, I implemented change listeners in both components to monitor changes in form control values and disable certain fields based on user input. ...

Angular component causing issues with correct functionality of absolute positioning

I am facing an issue with positioning an element absolute relative to a parent outside of an Angular component. Despite using the proper structure, it does not seem to work as expected. <div id="div1" style="position:relative; padding-lef ...

Is it feasible to make a <mat-form-field> unfocusable?

Within my form field setup, a simple form field is presented: <mat-form-field> <mat-label>A label</mat-label> <input matInput type="text"/> </mat-form-field> By default, clicking on any part of the form field tr ...

What is the significance of the IRenderFunction interface definition in FluentUI?

Recently diving into TypeScript, I've begun working with DetailsList in Fluent UI. Check it out here: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist. I'm exploring the onRenderRow property, which is of type IRenderFunct ...

Angular date selection with a range of plus two days, factoring in the exclusion of weekends

I am currently using a mat date picker range with specific logic. The minimum date that a user can select on the calendar is set to + 2 days. For example, if today's date is July 20, 2022, the minimum selectable date would be July 22, 2022. However, ...

What is the best way to navigate through this array within my nextjs/typescript/fetch application?

Having trouble finding a way to efficiently search through the CustomersList array. Any help would be greatly appreciated. Here's what happens after fetching the data: const data = await res.json(); return { props: { CustomersList: data, ...

Having trouble making the HTML append to a div in JavaScript and attaching a TypeScript function to a (click) event?

My external javascript file includes a function that adds HTML to the siteLayoutComponent.html DIV. Here is an example of the code: function AddNotification(data) { $("#lstNotification").append(' <li id="' + data.id + '"><a ...

Implementing Apollo GraphQL code generation for NextJS frontend development

Currently, I am facing an issue while trying to type out my front end react queries with Apollo in nextJS. Despite multiple configurations attempts, I keep getting an unknown error on my query when using import {gql} from src/__generated__/gql. Hovering ov ...

TypeScript is encountering difficulty locating a node module containing the index.d.ts file

When attempting to utilize EventEmitter3, I am using the following syntax: import EventEmitter from 'eventemitter3' The module is installed in the ./node_modules directory. It contains an index.d.ts file, so it should be recognized by Typescrip ...

Testing the catchError pipe function within an Angular service through unit testing

Trying to figure out how to properly test this function. I've noticed that from (err)=>{ line,, it appears to be an uncovered statement. service.ts Deletevote(inp) { console.log(inp); return this.http.post(environment.apiUrl + '/ap ...

Encountering a typescript error: Attempting to access [key] in an unsafe manner on an object of

I have recently developed a thorough equality checking function. However, I am encountering an issue with the highlighted lines in my code. Does anyone have any suggestions on how to rectify this problem (or perhaps explain what the error signifies)? Her ...

Error in NestJS: Module 'html' not found

I encountered an issue while attempting to display a basic static HTML file (no template) and I'm puzzled by the error message. Despite numerous attempts, I have been unable to resolve the error. src/modules/app.module.ts import { Module } from ' ...

When is it appropriate to utilize the produced HTML code?

Imagine a scenario with a template structured like this: <a id="registerLink" *ngIf="!isLoggedIn" #registercontainer>Login</a> Underneath, we have the following component: @ViewChild('registercontainer') registercontainer: ElementR ...

How to display a PDF in Angular 6 using a byte array retrieved from a WebAPI

Having trouble opening a PDF from byte array sent by WebAPI. This is my Service: fetchPdfDocument(): Observable<any> { return this.httpClient .get(this.configuration.serverUrl + this.configuration.getPdfDoc, { re ...

Retrieve validators and values from an Angular FormControl

Would you happen to know how to determine if an Angular FormControl contains a particular validator and access its value? For example, suppose I have a form control set up like this: testControl: new FormControl(null, [Validators.required, Validators.minL ...

The process of extracting a value from an array of objects encountered an error due to the undefined object

I am looking to extract the value from an array within an object while also implementing error checking. The code I currently have checks if a specific key exists in the object and if the value associated with that key is of type array. If both condition ...

What is the best way to change the value in a ReplaySubject?

I am looking to retrieve the current value and invert it: private controlActive$ = new ReplaySubject<Tool>(); if(this.type === "A") { this.controlActive$.next(!this.controlActive$.getValue()); } Is there a more eloquent way to achieve this? ...

Tips for Maintaining User Sessions in Ionic 4 Application

I am facing an issue with keeping users logged in to the app in Ionic 4. I have tried storing credentials like email and cross-checking the user using an API, then redirecting to the menu page. However, I am experiencing a brief moment on the login page be ...

Provide users with the option to select the email they want to use for signing up while utilizing Angular Firebase's Google signup

My implementation involves using Angular with Firebase for sign up with Google. var result = await this.afAuth.auth.signInWithPopup( new auth.GoogleAuthProvider() ); When I visit my website in Google Chrome while logged into multiple Gmail accounts ...