Home » Javascript » AngularJs 1.7 Data inside es6 component not available on template file

AngularJs 1.7 Data inside es6 component not available on template file

Posted by: admin October 29, 2018 Leave a comment


I just create the project AngularJs 1.7 and webpack 4 with ES6 class on component and module setup.

this is my app main module.

// Core Styles
import './styles/main.scss';

// Core Angular
import angular from 'angular';

import { AppComponent } from "./app.component";
import CommonModule from './modules/common/common.module';
import PackagesModule from './modules/packages/packages.module';
import PackagesService from "./services/packages.service";

// These all export the module name
// import ngAnimateModuleName from 'angular-animate';

const dependencies = [
    // ngAnimateModuleName

angular.module('app', dependencies)
    .component('appComponent', AppComponent)
    .service('PackagesService', ['$http', PackagesService]);

this is my js component file.

import './app.component.scss';

export const AppComponent = {
    template: require('./app.component.html'),
    controller: [
        class AppController {
            constructor (PackagesService) {
                this.test = 11;

But seems like test variable is not available inside the template file.


<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="packages-name-box">
                <h1 class="homepage-title">Packages Name {{ test }}</h1>
                <packages-list-group pages-data="pagesPackageData"></packages-list-group>

enter image description here

And this is HTML LOADER inside webpack.confing

    // Reference: https://github.com/webpack/raw-loader
    // Allow loading html through js
    test: /\.html$/,
    loader: 'raw-loader'

Am i missing something why this.test is not display anything inside the template?

Thanks for your help!