The code encountered an issue with TS2554 error, as it was anticipating two arguments but was only provided with one when

Before, I utilized ViewChild like this:

@ViewChild("InternalMedia") localStream;
@ViewChild("emoji") mEmoji;

Everything was functioning well up until angular-7.x.

However, after updating to angular-8.x, the following error started popping up:

.../call_emoji/component.ts(41,4): error TS2554: Expected 2 arguments, but got 1.

Upon consulting https://angular.io/api/core/ViewChild, I made the change to:

@ViewChild("InternalMedia",{static:false}) remoteStream;

This resolved the issue. Still unsure about the purpose of the static parameter and how it should be configured to replicate the previous behavior?

angulartypescriptangular7viewchildangular8

Answer №1

When transitioning to Angular 8, it is important to manually declare whether a component is static or not.

@ViewChild(QuilldEditorComponent, {static: true}) quillEditorComponentInstance;

If you have any additional questions, feel free to ask or for more detailed information, please refer to this issue https://github.com/angular/angular-cli/issues/14553 or consult the official documentation https://angular.io/guide/static-query-migration

// query results available in ngOnInit
@ViewChild('foo', {static: true}) foo: ElementRef; 

OR

// query results available in ngAfterViewInit
@ViewChild('foo', {static: false}) foo: ElementRef;

Answer №2

As per the Angular documentation, static checks are used to determine whether query results should be resolved before or after change detection runs.

This option allows developers to specify if only static results should be returned. If not provided, the compiler will default to using query results to determine when query resolution occurs. Queries within nested views (e.g. *ngIf) will be resolved post-change detection, while others will be resolved pre-change detection.

This setting essentially controls the timing of element retrieval through queries. Setting it to false means the query will run after change detections, and true means it will run immediately.

For more details on why this option is important, refer to this Github issue.

If you want the previous behavior, ensure that static is set to false. However, if your component's view is not dynamic (i.e., does not use *ngIf), you can safely set it to true.

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

Setting a blank value or null equivalent to a field: Tips and tricks

Here is the component state that I am working with: interface Person { name: string; surname: string; } interface CompState{ //...fields ... person?: Person; } render() { if(this.state.person){ const comp = <div>{this. ...

reactjstypescript

Getting access to a variable that was declared in a service class from a component in Angular 9 can be achieved by following

A problem has surfaced in my chat application where the local variable that I set to true in the service class after login is not being accessed correctly from another component. Despite changing it to true, the initial value of false is still being return ...

angularmean-stackmernweb-frontend

Challenges in conducting asynchronous tests for Angular2 due to setTimeout complications

Using Angular2.0.1, I encountered an issue while trying to write unit tests for an angular component that involved async tasks. This is a common scenario and even the latest testing examples from Angular include async tests (see here). My test kept failin ...

angularjasmineangular2-testing

Failure to Apply Angular Conditional Class

What is the reason for test-abc not being included? <div class="abc" [class.test-abc]="true"></div> I successfully implemented it with this syntax: [ngClass]="{'foo': true, 'abc': true}" ...

angular

Unable to crop the content of an input text field using Angular Forms 7

I am currently using Angular forms(7.2.10) with Parent / child components in my Angular 7 application. My goal is to successfully trim the text field input (String) from both leading and trailing white spaces, but unfortunately, I have not been able to ach ...

angularangular-forms

Encountering "Undefined error" while using @ViewChildren in Angular Typescript

In my application, I am facing an issue with a mat-table that displays data related to Groups. The table fetches more than 50 rows of group information from a data source, but initially only loads the first 14 rows until the user starts scrolling down. Alo ...

angulartypescriptundefinedviewchildren

When executing the "node app.js" command, the <app-root> element appears empty in the browser

After creating an Angular 7 application with the Angular CLI and adding my express server, I encountered a strange issue. When starting my app with the command "node server/app.js", the browser displayed <app-root></app-root> in the "Elements" ...

node.jsangularexpressangular7

Is it possible for Visual Studio Code to create type declarations?

One of my tricks for quickly obtaining typings involves deriving them from actual data: https://i.stack.imgur.com/EPtMm.png I typically use a snippet like this: const ParcelFeatureTypeInstance = {"displayFieldName":"NAMECO","fieldAliases":{"PIN":"PIN / ...

typescriptvisual-studio-code

How can I utilize the Redux store outside of a component in a React application with ASP.NET Core and TypeScript?

While I have some experience with React, I am new to using Redux. Luckily, Visual Studio 2017 comes with a built-in template for React + Redux under .NET Core 2.0. About my environment: Visual Studio 2017 React 15.6.1 TypeScript 2.4.1 Redux 3.7.1 Rea ...

reactjstypescriptasp.net-coreredux

The function within the Context Hook has not been invoked

My attempt to implement a signin method using the context hook is not working as expected inside the AuthContext file. When calling the signin method from the Home Page, neither the console.log nor the setUser functions are being executed inside the AuthC ...

reactjstypescriptreact-hooksnext.js

Transform Angular 4 by enforcing fatal errors on ng lint

When working with Angular CLI, I appreciate the convenience of its built-in linter. By simply running ng lint, I can effortlessly identify and rectify any errors within my codebase. In fact, it even has the capability to automatically fix some issues. I&a ...

angularangular-cli

Ensuring TypeORM constraint validations work seamlessly with MySQL and MariaDB

I recently started using TypeORM and I'm trying to incorporate the check decorator in my MySQL/MariaDB database. However, after doing some research on the documentation and online, it seems that the check decorator is not supported for MySQL. I'v ...

mysqltypescriptmariadbtypeorm

What is the simplest way to incorporate Vue with Typescript, without the need for a complex build setup?

I've been spending the last couple of days experimenting with my basic ASP.NET Core website set up for Typescript 2.9, but unfortunately, I haven't made much progress. My main goal is to keep the front-end simple, with just single Vue apps on eac ...

typescriptasp.net-corevue.js

Updating components in Angular4 when route changesHow to update components on route

How can I ensure my component updates when the route changes? Here is the code for my component : import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ListService } from '.. ...

javascriptangularangular4-router

Angular with D3 - Semi-Circle Graph Color Order

Can someone assist me with setting chart colors? I am currently using d3.js in angular to create a half pie chart. I would like to divide it into 3 portions, each represented by a different color. The goal is to assign 3 specific colors to certain ranges. ...

javascriptangulartypescriptd3.jsangular12

Organizing JSON keys based on their values using Typescript

In the context of a main JSON structure represented below, I am interested in creating two separate JSONs based on the ID and Hobby values. x = [ {id: "1", hobby: "videogames"}, {id: "1", hobby: "chess"}, {id: "2", hobby: "chess ...

javascriptjsonangulartypescriptmapreduce

Set an enumerated data type as the key's value in an object structure

Here is an example of my custom Enum: export enum MyCustomEnum { Item1 = 'Item 1', Item2 = 'Item 2', Item3 = 'Item 3', Item4 = 'Item 4', Item5 = 'Item 5', } I am trying to define a type for the f ...

javascripttypescriptobjecttypesenums

Having trouble applying CSS while printing using the ngx-print library in Angular 14. Can anyone help me out with this issue

The table shown in the image is experiencing issues with applying CSS properties when printing. While the background graphics feature has been enabled, the preview section still does not reflect the CSS styling. What could be causing this discrepancy? Cli ...

htmlcssangular

Utilizing React and TypeScript: Passing Arguments to MouseEventHandler Type Event Handlers

Can you help me understand how to properly define the event handler handleStatus as type MouseEventHandler, in order to pass an additional argument of type Todo to the function? interface TodoProps { todos: Array<Todos> handleStatus: Mous ...

reactjstypescript

Setting up a custom PrimeNG theme to match our unique style is a great way to

I am currently using the most recent version of "primeng": "^12.2.0", and I am looking to implement my own custom theme for primeng. Despite searching through numerous blogs, I have yet to find a solution. In an attempt to create my cu ...

cssangulartypescriptsassprimeng