Having trouble getting my Angular 1.5 component in typescript to function properly

I'm having trouble getting this code to work, can't figure out why the button isn't displaying :(

Any suggestions? Appreciate it.

https://jsfiddle.net/slishnevsky/Let38jho/10/

Angular/Typescript

let app = angular.module('app', []);

export class MyController {

    public name: string;

    constructor() {}

}

export class MyComponent implements ng.IComponentOptions {

    public bindings: any;
    public controller: any;
    public controllerAs: string;
    public template: string;

    constructor() {
        this.bindings = {
            name: '@'
        };
        this.controller = MyController;
        this.controllerAs = 'vm';
        this.template = '<button>{{vm.name}}</button>';
    }
}

app.component('MyComponent', new MyComponent());

HTML

<div ng-app='app'>

    <my-component name='Miranda'></my-component>

</div>

Answer №1

View the functioning demo here: https://jsfiddle.net/13ju990x/

Here are two important issues to consider:

  1. When using Typescript, the export keyword is transpiled to amd or commonjs (or umd) format. There may be issues with module loaders on platforms like jsfiddle, where your code is placed directly in a <script> tag. This could lead to errors like

    Uncaught ReferenceError: exports is not defined
    . Check out this example for more details.

  2. Angular follows Kebab-case convention, so remember to use

    app.component('myComponent', new MyComponent());
    instead of 'MyComponenet'. It might seem counterintuitive, but it's essential for consistency within Angular's framework.

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

status: 400 message: "There appears to be some issues with the validation process."

I'm encountering a 400 error code and I'm struggling to pinpoint the issue. My attempts to find solutions online have been unsuccessful so far. Any assistance or insight would be greatly appreciated. Thank you. The error message states: "The JSO ...

My controller in AngularJS is having trouble fetching the latest values of the $scope variables

In my code, I've included the relevant snippet below. The base angularJS seems to be functioning properly as the HTML document doesn't display {{}} variables but instead remains blank. I suspect that this is due to the variables receiving a null ...

Obtain information from a JSON file based on a specific field in Angular

The structure of the JSON file is as follows: localjson.json { "Product" :{ "data" : [ { "itemID" : "1" , "name" : "Apple" , "qty" : "3" }, { "itemID" : "2" , "name" : "Banana" , "qty" : "10" } ] ...

Unable to reach the form within the AngularJS controller

Having trouble accessing a form variable from my controller. When I try to access it using $scope.locationForm, it returns 'undefined'. However, when I use console.log($scope), I can see the locationForm in the console. Here is my HTML code: &l ...

Using the Permissions directive in Angular

Currently, I am developing a Single Page Application (SPA) that interacts with a REST server on the backend. The objective is to create a user interface that is consistent across all roles. For example: On a product page, a guest can view the product and ...

Conceal a specific segment on the web page if the API call in Angular does not return any data

I'm currently working with data retrieved through an API call and I need assistance in implementing code to hide a section when there is no data being fetched. Could you provide a sample code for this? ...

Utilize ng-model as a parameter in a ng-click function

Is it possible to pass an ng-model as a function parameter? For example: <input type="text" ng-model="myModel"> <button ng-click='save('button1', myModel)'>save</button> <button ng-click='save('button2&ap ...

Is it possible to use AngularJS with a single template that caters to all categories

Apologies for any language barriers, I have been following the guidance provided in the phoneCat app example. Specifically, I am working on integrating one category (phone list and detail partial templates) into my project. For instance, I aim to include ...

Ways of transferring ASP.NET MVC view data to an AngularJS controller

I am looking for a way to transfer values from an ASP.NET MVC view (.cshtml) to an AngularJS controller. While I am proficient in AngularJS, I need guidance on how to achieve this in MVC. I have values stored in the MVC cshtml file that I would like to pas ...

Creating animated effects in AngularJS using pure JavaScript only, without relying on CSS animations

I am currently working on an AngularJS module that needs to be compatible with Internet Explorer 8 and 9. The existing animation directives in the library rely heavily on CSS transitions, which do not work well in these browsers. As a solution, I am cons ...

Dynamic Angular TreeView showcasing nested children branches

I am in need of creating a treeView that can handle dynamic data. Currently, I am utilizing the syncfusion component which can be found at this link. The challenge I am facing is that the data object I receive is incomplete, with the "children" being gene ...

Maximizing Reusability: Implementing Redux Toolkit Reducers with TypeScript

Below is an example of a slice that I have: const authSlice = createSlice({ name: "auth", initialState: { ...initialUserInfo, ...initialBasicAsyncState, }, reducers: { setUser: (state, { payload }: PayloadAction<{ userObj: ...

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle w ...

Types of navigation items based on conditions

I want to create an interface where a navigationItem can have optional childs for a dropdown menu. If the childs property is provided, I want to require the icon property in the navigationItem object. If no childs are given, the icon property should not be ...

What is the best way to display the information from a different React component in the console upon clicking a button?

Below is the code for a button in one of my component files that triggers a form modal: <Button onClick={() => setOpen(true)} style={{ cursor: "pointer", }}> REQUEST </Button> <FormDialog isO ...

How can we leverage mapped types in TypeScript to eliminate properties and promisify methods?

Below is the provided code snippet: class A { x = 0; y = 0; visible = false; render() { return 1; } } type RemoveProperties<T> = { readonly [P in keyof T]: T[P] extends Function ? T[P] : never//; }; type JustMethodKe ...

Creating an Angular form from scratch using HTML

I've developed a component named login. Initially, I created an HTML form called login.component.html and then decided to convert it into an Angular form. To achieve this, I inserted <form #loginform="ngForm"> in the login.component.ht ...

Every time I make updates, I have to reload the page to see the changes take effect

Currently, I am in the process of developing a web application that utilizes Firebase Firestore as the backend and NoSQL database, with Angular serving as the frontend. With frequent updates and changes being made to the website, it becomes cumbersome to c ...

Exploring the power of Vue 3 and Vuex with Typescript to access class methods

Can Vuex state be used to access class methods? For example, in this scenario, I am attempting to invoke fullName() to show the user's formatted name. TypeError: store.state.user.fullName is not a function Classes export class User { constructo ...

Can a standard tuple be matched with its corresponding key?

This code snippet showcases a function that can recognize that the key "banana" cannot have the value "red": type Fruits = { banana: 'yellow' | 'green' strawberry: 'red' } const fruit = <K extends keyof Fruits>(modu ...