Is $onInit utilizing a separate scope for its execution?

HTML:

<map street="{{firstunit.street}}"/>

Component:

@Component('CustomerService', {
    templateUrl: '/CustomerService/_UnitCard/MapComponent/Map.html',
    selector: 'map',
    bindings: {
        street: '@',
    }
})
export class MapComponent {
    private x: string;


    public $onInit() {
        this.x = 'y';
    }

    public getValue() {
        console.log(this.x);
    }

}

In my class, I initialize a value using $onInit but encounter an issue after calling another function where it logs 'undefined'. How can I ensure that the class property is correctly set using $onInit? (utilizing angular 1.7 with typescript).

Answer №1

Avoid using self-closing tags when working with components.

<map street="{{firstunit.street}}"></map>

For more information on the validity of non-void self-closing tags in HTML5, check out this discussion.

According to the documentation:

Life-cycle hooks

Directive controllers in AngularJS can utilize methods like $onInit(), which is called after all controllers on an element have been initialized and before linking functions are executed.

— Refer to AngularJS Comprehensive Directive API Reference - Life-Cycle Hooks

The $onInit function should be part of the component controller and is triggered by the $compile service after binding component attributes.

In components, the controller is linked to the component scope through the $ctrl property or as specified by the controllerAs option.

If the getValue function returns undefined, it could be due to its invocation occurring before the $onInit function is called by the $compile service.

For further details, visit:

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

What is the best approach to implement server-side rendering in Next.js while utilizing Apollo React hooks for fetching data from the backend?

I have a Next.js project that is utilizing Apollo GraphQL to retrieve data from the backend. My goal is to render the page using server-side rendering. However, I am encountering an obstacle as the React hooks provided by GraphQL Apollo prevent me from cal ...

Messages are not showing up inside the repeater

I developed a custom directive that displays blank input fields to be filled with project names in an array of objects. Each object has multiple properties, but for now, I am focusing on the project name property only. <div ng-repeat="projectStatus in ...

Exploring the Integration of TypeScript within Vue.extend: A Comprehensive Guide on Managing Props

pic1: https://i.sstatic.net/I1FXE.png I've included prop descriptions in my Vue.extend component. https://i.sstatic.net/70dmy.png Why don't I see any tips when entering keys in props? How can I handle "props" in Vue extends? It seems like I ...

How can I invoke a function within a directive-generated HTML element's scope?

I created a custom directive that utilizes element.html() to set the HTML content. Within this HTML code, I would like to be able to invoke functions from the scope where the directive is being used. Here's an example: app.directive('myDirective ...

Exploring Protractor testing with Bootstrap modals

I'm having an issue testing a bootstrap modal. Here's the scenario: Click on a button to display the modal The modal body has a list of buttons When I click on one of them, it doesn't do anything My Protractor code snippet: element(by. ...

Scrolling horizontally in md-list

I have a list of items where each item can be of varying lengths horizontally: https://i.sstatic.net/ITIQd.png The issue is that long items are getting cut off on the right side. Here's the code snippet I am currently using: <md-list-item ng-repea ...

Issue with the code flow causing nested function calls to not work as expected

I'm experiencing an issue with my code: The problem arises when param.qtamodificata is set to true, causing the code to return "undefined" due to asynchronous calls. However, everything works fine if params.qtamodificata is false. I am seeking a sol ...

strictNullChecks and the dissemination of null values

Considering implementing the strictNullChecks flag in a large code base presents some challenges. While it is undeniably a valuable tool, the abundance of null types in interface definitions may be impacting the code's readability. This is particularl ...

Transferring TypeScript modules for browserifying

Recently, I transformed my canvas library from plain JavaScript to TypeScript. I have structured the code using classes, all of which are part of the cnvs module. However, I am facing difficulties in compiling these classes into a single file. My goal is ...

Running a Vue.js 3 application with TypeScript and Vite using docker: A step-by-step guide

I am currently facing challenges dockerizing a Vue.js 3 application using Vite and TypeScript. Below is my Dockerfile: FROM node:18.12.1-alpine3.16 AS build-stage WORKDIR /app COPY package.json ./ RUN yarn install COPY . . RUN yarn build-only FROM ngin ...

Enhance the annotation of JS types for arguments with default values

Currently, I am working within a code base that predominantly uses JS files, rather than TS. However, I have decided to incorporate tsc for type validation. In TypeScript, one method of inferring types for arguments is based on default values. For example ...

Find keys in an array based on a specified value

I need to retrieve an array of keys from an object that match a specified value ...

RXJS expand keeps on recursing indefinitely

After successfully uploading a file to Firebase, I implemented a recursive function to listen for GCP trigger logs. Everything seems to be working well, but I'm facing an issue where the recursive expand function never exits. Despite checking the val ...

Typescript for managing the Shopify admin API

Is there anyone who can confirm whether Shopify offers typescript definitions for their admin API? I'm specifically interested in finding types for Orders, Products, and Variants. I initially assumed that this package would have them, but it seems l ...

No provider for aspnetcore-spa routing

I'm using the Yeoman aspnetcore-spa template with Angular 2. There are essentially 3 key files involved: app.module.client.ts app.module.server.ts app.module.shared.ts I have placed my Service in the providers section of app.module.client.ts and t ...

A guide on updating and monitoring the boolean state of individual elements within an array

I am attempting to create a feature in react native where pressing a TouchableHighlight changes its color. Currently, I have a state variable that toggles between true and false when the button is pressed. However, this causes all elements in the map to ...

The function is not valid due to an angular-parse argument

This is my first experience with using angular and parse.com. I encountered the following error: Error: Argument 'eventList' is not a function, got undefined when attempting to execute the following angular code: var main_app = angular.mod ...

Troubleshooting: Resolving the error message 'Unable to assign to Partial<this>' within a subclass method

If I call the base class's update method using a subclass instance, it functions as expected. However, I encounter an error when attempting to do so within a subclass method: Argument of type '{ prop: number; }' is not compatible with par ...

The issue of Angular's ng-repeat view not refreshing after a search query remains unresolved

Having some trouble with updating a results array in AngularJS using a service call. After submitting a form and calling the service, I set up my callbacks with .then() on the promise object. However, the view only updates when I start deleting characters ...

What is preventing React CLI from installing the template as TypeScript?

When I run npm init react-app new-app --template typescript, it only generates a Javascript template project instead of a Typescript one. How can I create a Typescript project using the CLI? Current Node JS version: 15.9.0 NPM version: 7.0.15 ...