Angular 2: Where do I specify additional methods?


I’m working hard on learning Angular 2 development, so excuse the basic question. I used Angular-full-stack ( to generate a skeleton app. Among other things, it pre-generates 5 files in client/app/main: main.controller.js, main.controller.spec.js, main.html, main.js, main.scss


'use strict';

(function() {

  class MainController {

    constructor($http) {
      this.$http = $http;
      this.awesomeThings = [];

    $onInit() {
        .then(response => {
          this.awesomeThings =;

    addThing() {
      if (this.newThing) {
        this.$'/api/things', {
          name: this.newThing
        this.newThing = '';

    deleteThing(thing) {
      this.$http.delete('/api/things/' + thing._id);

    .component('main', {
      templateUrl: 'app/main/main.html',
      controller: MainController

There are a constructor and some methods already pre-defined. However, trying to access these or any other I add from main.html doesn’t work:


<button onclick="deleteThing()">Test: deletething</button> 

Clicking the button gives the following console error:
“Uncaught ReferenceError: deleteThing is not defined”

How or where does one add his/her own methods then in a way that they can be accessed? For that matter, what is supposed to go into main.js?


<button (click)="deleteThing()">Test: deletething</button> 


Answered By – zpul

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.