Reference loss occurs in Angular Ionic when using @ViewChild

This situation is straightforward

I am dealing with a reference in this format

@ViewChild('myElement') myElementVar : SomeClass;

The element I am referencing appears like this

<element #myElement *ngIf="someBoolean"></element>

As someBoolean turns false, myElementVar becomes undefined, I understand that this happens because *ngIf completely removes the element from the DOM, causing the reference to be lost.

My inquiry is whether it is viable to re-assign
myElementVar to #myElement
when someBoolean becomes true again.

javascriptangulartypescriptviewchild

Answer №1

One way to achieve this is by using ChangeDetectorRef.

Take for example the scenario: when you click to activate the toggle function, it removes the first line along with its reference:

<h1 #myElement *ngIf="someBool">Hello World.</h1>

Subsequently, toggling again will require you to re-assign your referenced element.

For more details, check out this link.

Keep in mind that if you ensure to validate the existence of your reference, Angular can manage this internally without the need for ChangeDetectorRef.

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

Is there a way to deactivate the minutes input feature in the Angular UI Timepicker?

I am using a plugin that displays the time in hours and minutes. However, I only need to show the hours. Is there a way to hide the minutes block? This is my HTML code: <uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="1" minute-step ...

javascriptangularjsangular-ui

Is there a way to stop "window.location.replace()" from being replaced or overridden?

Is there a method to safeguard against alterations or overrides of window.location.replace()? For instance, attempting to change it like this: window.location.replace = function(){ return "Hi" }. Initially, I experimented with using Object.free ...

javascripthtmlfunctionobject

Interacting with icons using TouchableOpacity and onPress functionality

I am attempting to implement onPress functionality for icons using TouchableOpacity. However, when I click on the icon, nothing happens and there are no console logs displayed. I have also tried enclosing the icon within an additional View, but that appro ...

javascriptreactjstypescriptreact-nativenative-base

Patterns for Spring Boot backend and Angular frontend designor Strategies for designing a Spring

I have developed an application that utilizes Spring Boot for its back end and Angular for the front end, connected through APIs. The Spring Boot components include: Dao Controller Entity Service and other classes. Upon studying further, it appears that ...

angularspring-bootdesign-patterns

Using NodeJS with the Express framework to send a GET request

Can express be used as a client-module for making http-requests to another server? Currently, I'm handling requests like this: var req = http.get({host, path}, function(res) { res.on('data', function(chunk) { .... } } This ...

javascriptnode.jsexpress

Is it possible to execute a standalone .js file using Node.js and Express?

I am working on a Node.js/Express project and I need to test a specific file containing a single function. Currently, I have been calling this function in the index.js file and running all functions within it by using `npm run dev`. However, I would like t ...

javascriptnode.jsexpress

Tips for removing data from documents that include automatically generated IDs

In my Angular project, I am utilizing google-cloud-firestore as the database. To import Firestore, I used the code import { AngularFirestore } from '@angular/fire/firestore';. The following function is used to add data to the database: changeLev ...

angulartypescriptgoogle-cloud-firestore

Navigating with AngularJS 2 on Internet Information Services (IIS)

I'm facing an issue with my ASP.NET CORE application that uses angular2 routing. While running the app locally, the routes resolve correctly. However, when I deploy it to a server (running on IIS 7), the routes seem to be appending the folder director ...

angulariisasp.net-core

Having trouble with a JavaScript function and tag that don't seem to be working in Chrome, but function well in Mozilla Firefox. Can anyone provide assistance with

Below is the code for creating two dropdowns: one for "Property Type" and the second for "Property Sub Type". This code works fine in Firefox but not in Chrome. When selecting "residential" as the property type, only residential values will appear in the ...

javascripthtmlgoogle-chromejspbootstrap-4

Tips for personalizing the color scheme of Material UI Stepper Step?

I need help customizing the disabled Step color for Material UI Steppers. The default colors are Blue for enabled steps and Grey for disabled steps, but I want to change it to a different color as shown in this example: https://i.stack.imgur.com/HGGxp.png ...

javascriptcssreactjsmaterial-ui

Preserve the ajax controls while uploading files

I encountered a minor issue with file uploading. When I click the upload button, a window (ajax powered) pops up for selecting a file. However, as soon as the file is uploaded to the browser, the page reloads and the window closes, leaving me without the ...

phpjavascriptajax

Configuring CORS settings in Angular-cli

Upon making a request to my backend url http://docker-users:5500/users?all=true, which returns a list of users, I encountered an issue with Angular-CLI's localhost url: http://localhost:4200. Even after configuring the proxy.config.json file and addin ...

jsonangularhttpcorshttprequest

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Here is a code snippet I'm using to switch between classes for buttons: $('button').on('click', function(){ var btn=$(this); if(btn.attr('class')=='tct-button'){ btn.removeClass('tct-button ...

javascriptjqueryhtmlcss

Having Trouble Setting Default Value in React Typescript MUI Autocomplete

I am encountering an issue with my React and Typescript code using MUI with the use of hook form. The problem arises when trying to set a default value for an Autocomplete field, resulting in the following error message: I am seeking assistance in resolvi ...

reactjstypescriptreact-hooksmaterial-ui

Using Angular's ngForm within an ng-template

Within my ng-template, there is a form displayed in a modal. .ts @ViewChild('newControlForm', {static: false}) public newControlForm: NgForm; .html <ng-template> <form role="form" #newControlForm="ngForm"> </form> </ng ...

angulartypescriptformsangular-template

Why aren't the divs appearing on the page?

I have developed a JavaScript and PHP page where the script in the PHP page sends data to my SQL database. However, the result is not displayed on my home page. Here is the code snippet: function getVote(question_ID) { var option_ID = document.queryS ...

javascriptphphtml

Multiplication table creation in Angular with ngFor

I am attempting to generate a table based on the input value. However, when I display the result, only the last value is shown instead of the entire result due to it being within a for loop. Below is the code from my multiplytable.component.ts file: expor ...

angularmultiplicationngfor

Guide to integrating various HTML files into a single HTML file with the help of Vue.js

Although I am familiar with using require_once() in PHP, unfortunately, I am unable to use PHP in my current project. I attempted to use w3-include from W3Schools as an alternative, but encountered issues with loading my scripts. Even utilizing JavaScript ...

javascriptphphtmlvue.jsvue-component

Issue with radio button click event not triggering

Whenever I click on a radio button, I want to call a function, but for some reason, it's not working as expected. I found this fiddle that demonstrates exactly what I want, but when I implement it in my code, it doesn't work. Here's a snipp ...

javascriptjqueryhtmlicheck

Tips for efficiently managing data in Angular using ngrx and redux when multiple components need to access the same data from the server

In my current project, I am utilizing Angular7 with ngrx and facing the challenge of fetching and storing data for multiple identical components. For instance: I am dealing with two (many to many) models - Author and Book There is an AuthorListCompon ...

angularreduxngrx