How can we access child components in vanilla JavaScript without using ng2's @ViewChild or @ContentChild decorators?

Recently, I delved into the world of using ViewChildren and ContentChildren in Angular 2. It got me thinking - can these be implemented in ES6 without TypeScript annotations?

The TypeScript syntax, according to the official documentation, looks something like this:

@ViewChild(ItemDirective) viewChild: ItemDirective;

Alternatively, as discussed in a forum post:

// myVideo == #my-video
@ViewChild('myVideo') myVideo: any;

I noticed that the source code contains Metadata classes for ViewChild and other similar annotations. I have a feeling it might be possible to use them in plain JS as well. However, I'm not entirely sure how to go about it. Can someone provide some guidance on this matter?

typescriptangular

Answer №1

I believe that decorators should be compatible with ES6 / ES7 (including ES7 decorators along with ES6 itself). ES7 provides class and property decorators, allowing you to transpile the ViewChild decorator.

However, it's a different story for parameter decorators as they are not currently supported...

For more insight, check out this answer and its related comments:

  • Angular 2: How Should We Be Handling Dependency Injection with ES6/ES7?

You might also find this link helpful:

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

When attempting to parse a file name using a regular expression in TypeScript (or even plain Node.js), the unexpected outcome is a

Looking to extract language information from a filename? Check out this simple construct: The structure of my language.ts model is as follows: export interface Language { language?: string; region?: string; } The function designed for parsing the fi ...

node.jsregextypescript

Decrease the construction duration within a sprawling Angular 8 project

It takes nearly 10-15 minutes to compile the project in production mode, resulting in a dist folder size of 32MB Here are the production options I am currently using:- "production": { "optimization": true, "outputHashing": "all", ...

javascriptangulartypescript

Positioning the box at the exact middle of the screen

I'm trying to center an item on the screen using material ui, but it's appearing at the top instead of the middle. How can I fix this? import * as React from 'react'; import Box, { BoxProps } from '@mui/material/Box'; functio ...

cssreactjstypescriptmaterial-ui

Unable to retrieve the request body with bodyParser

I am currently working on a NextJS React Application. Within my server/index.tsx file, I have the following code: import next from 'next'; import express from 'express'; import compression from 'compression'; import bodyParser ...

typescriptexpressfetchnext.jsbody-parser

Angular 7+: Trouble with displaying images from assets directory

Details regarding my Angular version: Angular CLI: 7.3.9 Node: 10.15.3 OS: win32 x64 Angular: 7.2.15 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... rout ...

javascriptangularjsangular

What is the best way to set up TypeScript interfaces using predefined string literals to limit the possible data types for shared attributes?

In this scenario, we have two interfaces named A and B with validation and variant properties. The goal is to create an Example object by using only the variant and validation values provided (since field is already defined). However, I encountered an erro ...

typescript

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

I'm currently developing a SharePoint Framework web part with Vue.js. Check out this code snippet: export default class MyWorkspaceTestWebPart extends BaseClientSideWebPart<IMyWorkspaceTestWebPartProps> { public uol_app; public render(): ...

javascripttypescriptsharepointvue.jsthis

Error message displayed: "There was an issue locating (undefined) and (undefined) while attempting to run Angular-CLI command 'ng g c my-new-component'."

Issue: I'm experiencing a problem in my Angular 5+ app project. When I try to generate a new component in one of my subfolders using the command ng g c my-component, nothing is being generated. Instead, I am encountering some unknown errors. I have a ...

angularterminalcommand-line-interfaceangular-cli

Creating an SCSS class in a component that is customizable and can

After doing some research and reading various guides and blogs, I am still struggling to find the right solution for this issue. Imagine having the following classes in your main styles.scss file: .btn { padding: 5px; text-transform: uppercase; } .b ...

angularsass

Struggling to integrate authentication and authorization features into a ReactJS application with Microsoft Azure AD or Database login functionality

We have an application built on React v18 with a backend that includes a Web API and SQL Server database. Our requirement is to authenticate and authorize users using either MS Azure AD or the database. If a user attempts to log in with a username and pas ...

reactjstypescriptauthenticationazure-active-directoryjwt

Encountering issues with reassigning variables in Angular resulting in null or undefined values

Currently, I am dealing with a test array where the initial value is set to null. In my function, I am making some modifications to the test array. However, even though I am reassigning values to it, the console still shows it as a null or undefined array ...

angulartypescript

Verifying input for Numeric TextField

The text field being used is: <TextField variant="outlined" margin="normal" id="freeSeats" name="freeSeats" helperText={touched.freeSeats ? errors.freeSeats : ''} error={touched.freeSeats && Boolean(errors.fre ...

javascriptreactjstypescriptmaterial-uiformik

Typescript - Defining string value interfaces

I have a property that can only be assigned one of four specific strings. Currently, I am using a simple | to define these options. However, I want to reuse these types in other parts of my code. How can I create an interface that includes just these 4 va ...

typescript

Angular is able to successfully retrieve the current route when it is defined, but

Here's the code snippet I am working with: import { Router } from '@angular/router'; Following that, in my constructor: constructor(router: Router) { console.log(this.router.url); } Upon loading the page, it initially shows the URL a ...

angulartypescriptng-admin

Vue's computed property utilizing typed variables

I am trying to create a computed array of type Todo[], but I keep encountering this specific error: No overload matches this call. Overload 1 of 2, '(getter: ComputedGetter<Todo[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T ...

javascripttypescriptvue.js

Converting a dynamic JSON object into a generic type in TypeScript

I need assistance with converting a JSON object into the equivalent generic type in TypeScript. The JSON object I have contains dynamic keys such as applications and permissions. The keys inside applications, like application_management and user_managemen ...

typescriptgenericstypescript-generics

CORS policy is preventing a patch request in loopback 4 from going through

Whenever I attempt to send a patch request to my API using Loopback 4, I encounter an error. All other requests work perfectly fine except for the patch request. The error message states: Access to XMLHttpRequest at 'api url' from origin ' ...

angularloopbackjsloopbackloopback4angular-loopback

The initial execution of the "ionViewDidEnter" method in Ionic 2 can be quite sluggish

Could you explain to me why there is a significant delay in loading the below functionality for the first time, but it loads normally on the second attempt? The same delay occurs on the actual device as well. Please refer to the attached video. Note : The ...

angularfirebaseionic-frameworkionic2

The null error occurs when rendering with React's state array

When I try to call an API that emits JSON, I am encountering an issue. I call the promise API function in componentDidMount, set the state, and then call it in the render method, but it always returns a null error. I need assistance, please. Interface fo ...

javascriptjsonreactjstypescript

Rearrange the layout by dragging and dropping images to switch their places

I've been working on implementing a photo uploader that requires the order of photos to be maintained. In order to achieve this, I have attempted to incorporate a drag and drop feature to swap their positions. However, I am encountering an issue where ...

javascriptangulartypescriptdrag-and-dropangular-cdk