Invoke directive upon host element rendering

When working with my Angular directive, I encountered an issue where I was trying to access the input elements within a form that I injected as a host element. However, it seems like the code is running before the form (host) has been rendered, meaning that the input elements have not yet been created.

 constructor(private elementRef: ElementRef,private renderer: Renderer2) { 
  let  formElement = <HTMLFormElement>elementRef.nativeElement;   
  let inputFields = console.log(formElement.getElementsByTagName("input")); //This returns nothing
  console.log(formElement.getElementsByTagName("input"));      //Although this works, it only logs lazy loaded inputs

I am wondering if there is a way to delay executing this logic until after the host view is fully ready. Perhaps something similar to an @HostListener for a ready event.

Answer №1

Following the advice of @Aluan, I am documenting this solution for future use: Include AfterViewInit in the Directive class.

DirectiveClass implements AfterViewInit {
constructor(private elementRef: ElementRef,private renderer: Renderer2) { 

  }
ngAfterViewInit(){
  let  formElement = <HTMLFormElement>this.elementRef.nativeElement;   
  let inputFields = console.log(formElement.getElementsByTagName("input"));
  console.log(formElement.getElementsByTagName("input"));      
}

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

The compilation of the module has encountered an error with the PostCSS loader. There is a SyntaxError at line 2, character 14 indicating an unknown

I am developing an Angular 8 application. Currently, I am incorporating AlertifyJs into my project. In the styles.css file of Angular, I have imported these libraries: @import '../node_modules/alertifyjs/build/alertify.min.js'; @import '. ...

Encountering problem with ngx material timepicker field within a mat dialog

When utilizing the ngx material timepicker field in a mat dialog, I am encountering an issue where the data is correctly mapped to the form group and the time displays properly when opening the clock view. However, the time does not display correctly on th ...

Before the service call finishes, Akita queries this.selectAll and returns an empty list

Here is the code snippet from my file named widgetquery.ts: @Injectable({ providedIn: 'root' }) export class WidgetQuery extends QueryEntity<WidgetState, WidgetTO> { public Widget$: Observable<WidgetTO> = this.selectActive().filter( ...

Is it possible to use programming to invoke a function with the identical name from within another function in Javascript or Typescript?

Currently, I am working with Typescript but presenting this question in Javascript. Any assistance for either language would be greatly appreciated. I have two objects that share the same interface. My goal is to create a third object with the same interf ...

Is there a more efficient method for providing hooks to children in React when using TypeScript?

My component structure looks something like this: Modal ModalTitle ModalBody FormElements MySelect MyTextField MyCheckbox DisplayInfo ModalActions I have a state variable called formVars, and a function named handleAction, ...

What is the best way to choose multiple elements within an Angular application?

<div class="modalmenu" > <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div> <div class="sep" # ...

Error TS2307: TypeScript could not locate the 'moment' module

Currently, I am in the process of developing a web application utilizing angular version 1.5 along with typescript 2.4.0. Additionally, I am integrating moment version 2.18.1 and gulp for handling project assembly. Here is an excerpt from my tsconfig.json ...

How to Connect Select Dropdown to a Static Array Object in Angular 2

I have connected my Select DropDown to static data. FieldModel.ts export interface Field { id : number; title : string; } app.PeopleListService.ts import { Injectable } from '@angular/core'; import { Field } from "../model/fieldMo ...

Issue with Angular Datatable: Table data is only refreshed and updated after manually refreshing the page or performing a new search query

Having trouble updating Angular Datatable after selecting different data? The API response is coming in but the table data is not being updated. Can anyone suggest how to properly destroy and reinitialize the table for the next click? Below is a snippet ...

Angular will hold off until the subscribe operation has completed before passing values to another function

Here's a function I have in the code: File: subcategory.service.ts getSubCategoriesById(inp_subCatid: String): Observable<any>{ this.getSubCategoriesList().snapshotChanges().pipe( map(changes => changes.map(c => ({ key: ...

Execute an npm script using a gulp task

Is there a way to execute an npm script command within a gulp task? package.json "scripts": { "tsc": "tsc -w" } gulpfile.js gulp.task('compile:app', function(){ return gulp.src('src/**/*.ts') .pipe(/*execute npm run tsc*/ ...

The functionality of Angular 5 reactive form valueChanges is not functioning correctly

I am currently working with a form inside a service: this.settingsForm = this.formBuilder.group({ names: this.formBuilder.array([]), globalIDs: this.formBuilder.array([]), topics: this.formBuilder.array([]), emails: thi ...

Effortlessly transfer model data to a different component in Angular upon clicking a button

Component A displays a list of Products, each with an option to view the details. When this option is clicked, I want Component B to show a list of items associated with that specific Product. I am having trouble passing the selected Product from Componen ...

What could be the reason for ngrx saving only the initial item in an array?

I have a collection of data retrieved from my REST service and I'm attempting to save it in my ngrx store. When I examine my reducer, I can successfully display each item of the array on the console. However, when I store it in the state, it gets redu ...

Issue encountered while trying to iterate through an observable: Object does not have the capability to utilize the 'forEach' property or method

I am currently following the pattern outlined in the hero.service.ts file, which can be found at this link: https://angular.io/docs/ts/latest/guide/server-communication.html The Observable documentation I referenced is available here: When examining my c ...

Guide to implementing validation on submit in Angular 7 reactive forms

Code Snippet: handleFormSubmission(){ if(this.Registration.invalid){ return; } alert('Thank you for submitting! Data:' + JSON.stringify(this.Registration.value)); } Form Markup: <form class="admin-form" [formGroup]="Registration" (ng ...

What exactly does the ".subscribe" function do within Angular framework?

Currently, I am exploring the angular-tour-of-heroes application and came across the .subscribe method in routing. Can anyone provide an explanation of what is happening in this code snippet? If you'd like to check out the app yourself, here's t ...

Exploring the functionality of LazyLoading and configuring Angular's NgModule

I am currently working on a module called 'DevicePreview' that contains various routes and can be accessed both from the root and from another module called 'Content'. When accessed from the root, DevicePreview displays routes /a, /b, ...

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Hey there fellow developers! I'm currently working on a simple Angular app that allows users to upload images to a gallery. However, I've encountered an issue while trying to upload the images to Firebase Storage. I keep getting an error mentioni ...

The styles are not being rendered on the Angular application

I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz) div.cover { align-items: center; background-color: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; ...