Having trouble accessing @ViewChildren from the parent component

I've been facing an issue while attempting to control the child instances of a component and I can't seem to bypass this particular error. I've been referring to solutions provided on this specific thread.

The main component Sequence houses child components of SequenceStep. In the parent component, the following declaration is present:

@ViewChildren(SequenceStep) steps: QueryList<SequenceStep>;

Then, I'm trying to manipulate these child components as follows:

ngAfterViewInit() {
    this.steps.changes.subscribe(steps => {
        console.log(steps);
    });
}

The issue that arises is:

metadata_resolver.js:639 Uncaught Error: Can't construct a query for the property "steps" of "Sequence" since the query selector wasn't defined.

Even though both Sequence and SequenceStep components have their selectors defined in their respective @Component decorators (sequence and sequence-step), this error persists.

What could possibly be the mistake I'm making here?

angulartypescriptangular-decorator

Answer №1

Did you attempt to include quotation marks in your @ViewChildren argument?

@ViewChildren('SequenceStep') steps: QueryList<SequenceStep>;

Answer №2

The problem may be connected to the importing of SequenceStep, so make sure to double-check the class name in the import statement.

Answer №3

Here are a couple key points to keep in mind:

  • When passing children from the outside, they are considered content and not children. The @ViewChild() decorator only works for children that are added directly to the component's template.

    The @ContentChildren() decorator is used for transcluded content:

    @ContentChildren(TheChild) kids: QueryList<TheChild>;

  • The this.kids.changes() method only notifies about changes after initialization. To handle this, access this.kids directly in ngAfterViewInit() and subscribe to get notified about any later changes.

    ngAfterViewInit() {
  this.myKidsCount = this.kids.length;
  this.cdRef.detectChanges();

  this.kids.changes.subscribe(kids => {
      this.myKidsCount = kids.length;
  });
}

  • It's important to avoid causing changes during change detection in Angular. Trying to update this.myKidsCount within ngAfterViewInit() can lead to an exception because it is called by change detection itself.

To work around this issue, trigger change detection explicitly after updating the myKidsCount property:

constructor(private cdRef:ChangeDetectorRef){}

ngAfterViewInit() {
  this.myKidsCount = this.kids.length;
  this.cdRef.detectChanges();
}

Check out this Plunker example for further clarification.

Answer №4

Using @ViewChildren('SequenceStep') resulted in success for me. I was using Angular 4.X.X and Angular CLI 1.X.X.

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 process for changing the text in a text box when the tab key on the keyboard is pressed in

When a user types a name in this text box, it should be converted to a specific pattern. For example, if the user types Text@1, I want to print $[Text@1] instead of Text@1$[Text@1]. I have tried using the keyboard tab button with e.keyCode===9 and [\t ...

javascriptreactjsregextypescriptreplace

Router navigation does not trigger LifeCycle calls

I currently have the following routes set up: {path:'home', component:HomeComponent, canActivate: [AuthGuard]}, {path:'profile', component:UserProfileComponent, canActivate: [AuthGuard] }, Additionally, in my navbar.component, I hav ...

angularangular2-routinglifecycleangular4-router

Errors may occur when utilizing TypeScript with the Context Provider API in React

I am in the process of developing a theme changer feature and I want to save the color chosen by the user in the context. However, when I try to pass data to the value prop of the Context.Provider, I encounter an error message TS2739: Type 'Readonly&l ...

reactjstypescript

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

Exploring NestJS: Leveraging the @Body() Decorator to Retrieve Request Body Data

import { Controller, Post, Body } from '@nestjs/common'; import { MyService } from 'my.service'; import { MyDto } from './dto/my.dto'; @Controller('my-route') export class MyController { constructor(private rea ...

typescriptexpressnestjs

Angular Update Component on Input ChangeEnsuring that the component is automatically

<div class=" card-body"> <div class="row"> <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6" routerLinkActive="active" *ngFor="let subject of subjects"> <div class=" fon ...

htmlangulartypescript

Switch up a button counter

Is there a way to make the like count increment and decrement with the same button click? Currently, the code I have only increments the like count. How can I modify it to also allow for decrements after increments? <button (click)="toggleLike()"> ...

typescript

Unable to retrieve information from a function in Vue.js (using Ionic framework)

When attempting to extract a variable from a method, I encounter the following error message: Property 'commentLikeVisible' does not exist on type '{ toggleCommentLikeVisible: () => void; This is the code I am working with: <template& ...

typescriptvue.jsionic-framework

Utilizing Angular 2 to Send Emails

How Can I Implement Email Sending Functionality in an Angular 2 App? I have an Angular 2 app hosted on Firebase and I am looking to incorporate a contact form that sends an email. While my preference is to utilize Nodejs for this task, I am open to explor ...

node.jsangularemailfirebase

Guide to implementing the patchValues() method in conjunction with the <mat-form-field> within the (keyup.enter) event binding

I am currently working on a feature that populates the city based on a zip code input. I have successfully achieved this functionality using normal HTML tags with the (keyup) event binding. However, when trying to implement it using CSS, I had to use (keyu ...

javascriptangulartypescript

Compiling TypeScript: Using the `as` operator to convert and then destructure an array results in a compilation error, requiring an

I am currently utilizing TypeScript version 2.9.2. There is a static method in a third-party library called URI.js, which is declared as follows: joinPaths(...paths: (string | URI)[]): URI; I have a variable named urlPaths that is defined as urlPaths: s ...

typescript

Display various items from a predefined list using Angular's *ngFor directive

Within my Angular project, I am managing a list of reports. This list is structured as an array with a base class to accommodate different types of reports. Even though the list is defined as type: ReturnReport, the individual items can vary between type: ...

angularpolymorphism

Display sub-objects within Chart.js

I'm currently tackling a project in Ionic 3 where I am utilizing an API that returns a JSON response with nested objects. My goal is to display certain aspects of these objects within a bar graph using chart.js. Unfortunately, I lack experience in ma ...

javascripttypescriptchartschart.js

How can I utilize the color prop in the theme file to style new variants more comprehensively with MUI theming?

I am working on creating a custom variant for an MUI button where the color specified in the color prop should be applied as both the border and text color. While the MUI documentation offers a suggested approach, it requires addressing each available col ...

reactjstypescriptmaterial-ui

Is there a way to implement hover behavior for a Material-UI Button within a ButtonGroup component?

When using MUI v5, I am encountering an issue where the first button in the code provided is only half working. The button is initially colored red (both the border and text), however, upon hovering over it, the color of the border changes to blue. This is ...

cssreactjstypescriptmaterial-uiemotion

How can I access a DOM element in an AngularJS 2 TypeScript file?

As a newcomer to AngularJS, I am attempting to add a spinner as a background to all images on my website. Since there are multiple images, using a single variable like isLoaded in the TypeScript file is not feasible. Here is how I am implementing it in th ...

angular

How to Make an HTTP POST Request in Angular without Including Headers

How can I configure Angular (version 4.0.2) to send a minimal HTTP POST request? When I use the default code like this: import { Http, Response } from '@angular/http'; export class MyService { constructor(public http: Http) { this.http.pos ...

angularhttpionic-framework

When using Selenium and C# to scrape an Angular website, the result is the Angular script rather than the fully rendered web page

It appears that Selenium is only able to see the HTML that is initially loaded on a webpage, not any changes or updates made after. This behavior has been consistent across different browsers like IE, Chrome, and PhantomJS. Even the built-in Chrome debugge ...

ajaxangularselenium

What is the best choice for a package.json file in an ASP.NET MVC project: devDependencies or dependencies?

I am currently in the process of developing an ASP.NET Core 2.0 MVC application and incorporating Angular 4 into it. To manage my dependencies, I have set up a configuration file named package.json in the root directory. Instead of using angular-cli, I ha ...

visual-studioangularnpmgulp

Getting the logged in user's ID in Angular using MongoDB and Node.js for the backend

How can I retrieve the logged user's ID so that when they click on "My profile", they are directed to url/profile/theirId? Thank you for your help! Below is my authentication.service code: export interface UserDetails{ username: string email: stri ...

node.jsangularmongodb