I want to know the proper way of utilizing ionViewDidLoad() within a component

Greetings! I am currently delving into ionic 3 and have some data stored in local storage. My aim is to utilize this data within a component. However, it seems that ionViewDidLoad, which functions perfectly on a regular page, is not working on a component. Below is the error message I encountered:

https://i.sstatic.net/WFAtU.png

Is there any alternative approach that you could recommend?
Component code snippet (offre.ts):

    import { Component, Input , Output } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database"; 
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';

@Component({
  selector: 'offre',
  templateUrl: 'offre.html',

})
export class OffreComponent {

    @Input('var') var;
    text: string;
    datas: FirebaseListObservable<any>;
    user : any ;

  constructor(public navCtrl: NavController, public db: AngularFireDatabase, public nativeStorage: NativeStorage) {
    this.datas=db.list('/posts');


  }

  ngAfterViewInit(){
    console.log(this.var);
  }
}

Answer №1

Implement ionViewCanEnter() to execute code prior to ionViewDidLoad()

Answer №2

I have incorporated this method into my application and fortunately, it did not result in any runtime errors. However, I highly recommend utilizing Angular's lifecycle hooks when working with Angular components. In your particular scenario, you may find the ngAfterViewInit() hook to be suitable.

Official Documentation

This method allows for a response after Angular has initialized the component's views and child views. It is triggered once following the execution of ngAfterContentChecked(). Note that this hook is meant for components only.

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

Nested ng-template in PrimeNG dropdown menu allows for a more dynamic and

I'm having trouble figuring out how to implement nested ng-template in Angular 5.2. Currently, I have a component within my app that utilizes PrimeNG dropdown: @Component({ selector: 'app-dropdown', template: ` <p-dropdown [opti ...

What is the best way to save an array of objects from an Axios response into a React State using TypeScript?

Apologies in advance, as I am working on a professional project and cannot provide specific details. Therefore, I need to describe the situation without revealing actual terms. I am making a GET request to an API that responds in the following format: [0: ...

A guide on implementing a "Select All" trigger in mat-select with Angular8/Material

Here is the code I have created: <mat-form-field appearance="outline"> <mat-label>Handler Type</mat-label> <mat-select multiple [(value)]="handlerType"> <mat-option *ngFor="let handler of handlerT ...

Summing up similar values of elements in an array (JavaScript) using Angular

My Current Tools Angular 5 AngularFire5 Firebase & Firestore My Goal I aim to iterate through an array containing objects. If a specific value in one object matches the same value in another object, I want to add their corresponding values togethe ...

When combining React with Typescript, you may encounter errors like: "The type 'never[]' cannot be assigned to the type 'StateProperties | (() => StateProperties)'. Make sure you are passing the correct argument types in

I have been honing my skills in TypeScript lately. I utilized Node Express TypeScript for the backend and React TypeScript for the frontend. My goal was to fetch data from the backend and display it on the browser, but I encountered an error: property &apo ...

Changes made to the source files in Webpack dev server combined with React and Typescript are not being successfully

I'm embarking on a new project to develop a small app using React, TypeScript, and Webpack for building. I found this helpful article to guide me through the process: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html All the proje ...

Testing Next.js's getServerSideProps function with Jest: A Step-by-Step Guide

I want to conduct Jest and Enzyme tests on the Next.js getServerSideProps function. This function is structured as follows: export const getServerSideProps: GetServerSideProps = async (context) => { const id = context?.params?.id; const businessName ...

Testing the AfterViewInit lifecycle hook in Jasmine tests

I'm finding it difficult to understand how lifecycle hooks relate to Jasmine testing. The Angular LifeCycle documentation doesn't cover testing at https://angular.io/guide/lifecycle-hooks, while the testing documentation only mentions OnChange at ...

Utilizing HTML and Ionic 3.x: Implementing a for loop within the HTML file by utilizing "in" instead of "of"

I am working with multiple arrays of objects in my typescript file and I need to simultaneously iterate through them to display their contents in the HTML file. The arrays are always the same size, making it easier to work with. Here is what I currently ha ...

The functionality of ItemSliding appears to be disabled when used in combination with

Could you please help me figure out why the Me button is not visible? I implemented the ItemSliding component. Here is the link to the stackblitz project. The issue is within the home folder. I am trying to create a list like the one below: UI https:// ...

NGRX: Issue with http retry interceptor preventing failure action from triggering

Incorporating NGRX into my project, I am looking to implement simple GET requests to an API that are retried up to five times. The reason behind this is occasional throttling from Azure Cosmos-DB (free-tier). To achieve this, I have set up an http-interce ...

Having trouble with Ionic 3's Screen Orientation Lock feature not functioning properly?

I am in need of a solution that will lock my app to portrait mode on phones and landscape mode on tablets, beginning with the splashscreen. I attempted to use the Screen Orientation plugin from Ionic Native, but unfortunately, it did not work for me. Here ...

Creating a second optional generic parameter in TypeScript

I'm having trouble with TypeScript generics My issue is as follows: I have an interface called 'Column' and a function called makeColumn to create a new column. I want to only set the first generic (UserModel), where the accessor must be a ...

Launching the col-sm bootstrap class at 768px screen size: Tips and tricks

Is there a way to change the default screen size implementation of the bootstrap class col-md from 768px to 576px so that the class col-sm is implemented at that screen size instead? Here are the current defaults: Extra Small (<576px) .col- Small (> ...

Angular is unable to fetch the chosen option from a dropdown selection

Recently, I encountered an issue with a module form that appears as a pop-up. Within this form, users can input data required to create a new object of a specific class. One field allows users to select a ventilation zone for the new room object being crea ...

When trying to ctrl-click on paths in Visual Studio Code, the resolution is incorrect

I'm currently working on customizing a library by modifying its source code. I've downloaded the source code and now I'm trying to configure vscode, typescript, and webpack to recognize that file. Although I've successfully aliased the ...

Top technique for storing a 2D array into a MongoDb database

I'm looking for the best way to store a large 2D array that I have generated. I'm considering converting this 2D array to a JSON format and then saving it using Mongoose. Is there a way to efficiently convert this data back and forth considering ...

Tips for addressing the browser global object in TypeScript when it is located within a separate namespace with the identical name

Currently diving into TypeScript and trying to figure out how to reference the global Math namespace within another namespace named Math. Here's a snippet of what I'm working with: namespace THREE { namespace Math { export function p ...

Having trouble importing pixi.js into my .ts file

I am a newcomer to utilizing pixi.js for the first time. I went ahead and installed it using npm install pixi.js --save-dev. However, despite adding the dependency to my package.json file, I encountered difficulties when attempting to import it. Surprising ...

Tips for utilizing PNG images in Next.js beyond the conventional PUBLIC folder

I have been trying to use images from a directory other than the Public folder by implementing the Next-Images library. Despite following the setup instructions in the documentation and watching various tutorials online, I am unable to load anything other ...