Angular 2: Where do I specify additional methods?

Issue

I’m working hard on learning Angular 2 development, so excuse the basic question. I used Angular-full-stack (https://github.com/angular-fullstack/generator-angular-fullstack) 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

main.controller.js

'use strict';

(function() {

  class MainController {

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

    $onInit() {
      this.$http.get('/api/things')
        .then(response => {
          this.awesomeThings = response.data;
        });
    }

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

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

  angular.module('orbitApp')
    .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:

main.html

...
<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?

Solution

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

Reference:
https://angular.io/guide/cheatsheet

Answered By – zpul

Answer Checked By – Marie Seifert (AngularFixing Admin)