Search code examples
angulartypescriptimportangular2-moment

Angular2 addArticle is not a function


When clicked on the submit button, I encounter this msg in the console and also if someone can help me how to import the moment from node_modules to angula2 project!!

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>

My app.module.ts

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

Solution

  • You have written the addArticle method in app.module.ts you should put that in app.component.ts

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

    move the addArticle method to app.component.ts as you're using that 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; 
          } 
    }
    

    For moment use the below import

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

    after npm install angular2-moment.. http://ngmodules.org/modules/angular2-moment