Angular 2 Typescript: Understanding the Structure of Member Properties and Constructors

I am currently exploring a project built with Ionic 2, Angular 2, and Typescript, and I find myself puzzled by the way member properties are being set. In the code snippet below, I noticed that Angular automatically injects dependencies into the constructor arguments. For instance, the 'nav' property is explicitly assigned to the value passed in through the constructor. On the other hand, when it comes to Firebase auth, we can access it within the 'login' method using 'this.auth', even though we haven't explicitly set it as a member variable. Why does this work for 'auth' but not for 'nav'? And what is the role of the 'private' keyword in the constructor parameters? Is it necessary to declare it both in the parameter list and in the property definition within the class? Does it automatically bind constructor variables to class properties if they share the same name?

export class LoginPage {
  nav:NavController;
  private auth: FirebaseAuth;

  constructor(nav:NavController, private auth: FirebaseAuth) {
    this.nav = nav; // Setting this is crucial for the setRoot function in login to work
    //this.auth = auth;  // How come we don't need to set this property here yet it's accessible in the login method?
  }

  login() {
    this.auth.login().then(authData =>{
       this.nav.setRoot(TabsPage);
    });
  }
}

Answer №1

Take note of the private keyword used in the line private auth: FirebaseAuth. This is a shorthand syntax for declaring class properties that are initialized from constructor arguments. Essentially, it is equivalent to:

private auth:FirebaseAuth;
constructor(auth: FirebaseAuth) {
   this.auth = auth;
}

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

Arranging elements within an outer array by the contents of their inner arrays

I need help organizing an array based on the alphabetical order of a specific value within the inner arrays. For example: I want to sort this array by the prefix "old," so old A, old B, etc. const array = [ { personName: "Vans", personTags: ["young", " ...

How can I receive live notifications for a document as soon as it is created?

My Angular app is connected to Cloud Firestore, and I've created a function in a service to retrieve a user's rating from the 'ratings' collection. Each rating is stored in this collection with the document ID being a combination of the ...

Vue.js is unable to recognize this type when used with TypeScript

In my code snippet, I am trying to set a new value for this.msg but it results in an error saying Type '"asdasd"' is not assignable to type 'Function'. This issue persists both in Visual Studio and during webpack build. It seems like Ty ...

proper method for adding line breaks in json

I am experiencing difficulty in creating a line break using \r\n with the given payload on this particular screen. I am on a quest to determine the correct json payload that needs to be dispatched to the frontend in order for it to register as a ...

Error: The Class object cannot be found in Object(...)(...)

I've been encountering a TypeError while trying to implement this angular code. The error seems to be generated around Class({constructor: function() {}}), but I'm not exactly sure why. Any help on this would be greatly appreciated. import "hell ...

Building a .NET Core 3.1 application that integrates SQL Server 2019 Express for managing multiple databases, including a main database dedicated to

I'm currently developing a web application using .NET Core 3.1 and Angular 9. I am curious to know if it is feasible to leverage the internal authentication/authorization system in .NET Core to connect to an "authorization" database. This would allow ...

After the initialization of the app, make sure to provide an InjectionToken that includes the resolved configuration

During the initialization of the application, I am looking to retrieve the configuration using a factory that will be resolved through the APP_INITIALIZER provider. export function loadConfig(): () => Promise<Config> { // return promised confi ...

After calling sequelize.addModels, a Typescript simple application abruptly halts without providing any error messages

My experience with Typescript is relatively new, and I am completely unfamiliar with Sequelize. Currently, I have only made changes to the postgres config in the .config/config file to add the dev db configuration: export const config = { "dev" ...

undefined event typescript this reactjs

I have come across the following TypeScript-written component. The type definitions are from definitelytyped.org. I have bound the onWheel event to a function, but every time it is triggered, this becomes undefined. So, how can I access the referenced el ...

Looking for a solution to the error message: "X is not able to be assigned to the type 'IntrinsicAttributes & Props'"

Greetings everyone! I need some assistance in setting up single sign-on authentication using React, Azure AD, and TypeScript. I'm encountering a type error in my render file and I'm unsure of how to resolve it. Below is the specific error message ...

Automatically generated error notifications for Express-Validator

I am looking to implement an Express API and incorporate request input validation using express-validator. Here is my current validation middleware: protected validate = async (request: Request, response: Response, next: NextFunction): Promise<void> ...

I'm encountering issues with undefined parameters in my component while using generateStaticParams in Next.js 13. What is the correct way to pass them

Hey there, I'm currently utilizing the App router from nextjs 13 along with typescript. My aim is to create dynamic pages and generate their paths using generateStaticParams(). While the generateStaticParams() function appears to be functioning corre ...

One-Of-A-Kind Typescript Singleton Featuring the Execute Method

Is it feasible to create a singleton or regular instance that requires calling a specific method? For instance: logger.instance().setup({ logs: true }); OR new logger(); logger.setup({ logs: true }); If attempting to call the logger without chaining the ...

Refreshing manually will display only the JSON data

Utilizing a NodeJS server to fetch information from a MySQL database and presenting it as a JSON object is the task at hand. app.get('/random', (req, res) => { var connection = mysql.createConnection({ host: 'localhost', ...

Bovine without Redis to oversee queue operations

Can Bull (used for job management) be implemented without utilizing Redis? Here is a segment of my code: @Injectable() export class MailService { private queue: Bull.Queue; private readonly queueName = 'mail'; constructor() { ...

What is the reason for receiving a JSX warning even though JSX is not being utilized in the code?

In my Vue.js component file using the Quasar framework, I have the following code block inside the <template>: <q-btn color="green" label="save & continue editing" @click="saveCase()" /> This snippet is par ...

Utilizing ALERTIFY JS (v1.9.0) with Angular 2: Step-by-Step Guide

I am having trouble implementing AlertifyJS (v1.9.0) in my Angular 2 application. In the vendor.ts file, I have included the following: import "alertifyjs/build/alertify.min.js"; import "alertifyjs/build/css/alertify.min.css"; and made a call to alertify ...

The `findOne` operation in Mongoose fails to complete within the 10000ms time limit

Encountering this error on an intermittent basis can be really frustrating. I am currently using mongoose, express, and typescript to connect to a MongoDB Atlas database. The error message that keeps popping up reads as follows: Operation wallets.findOne() ...

Transferring Information Between Components

After logging into my login component, I want to pass data to my navbar component but unfortunately, my navbar content does not update. The navbar component is located in the app-module while the login component is in a separate module. I attempted to us ...

What are the steps to display Firestore data on the server instead of the client side?

My objective is to display data on the server side. Expected outcome: the server should render the data. Actual outcome: the data is being rendered by the client instead of the server. The workflow follows this pattern Component -> call Use Case -> ...