Facing issue while calling @viewchild in angular

Question

Hi guys i'm working with angular and want to call @viewChild in ts file but facing an error "Decorators are not valid here." cant find any specific solution for my problem

I have tried many links regarding this problem including angular documentation, stackoverflow, youtube but not able to find any appropriate solution to my problem

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app-upload-card-details',
    templateUrl: './upload-card-details.component.html',
    styleUrls: ['./upload-card-details.component.css']
})
export class UploadCardDetailsComponent implements OnInit {
    @ViewChild(draganddropimage)
    constructor() {}

ngOnInit() {}
    }

HTML:Code
<div class="modal fade custom-modal-setting" id="drag-and-drop-image" #draganddropimage tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

Adrita Sharma · Accepted Answer · 2019-09-05 08:20:44Z

2

From Angular 8, you need to add { static: true } in ViewChild

Try like this:

@ViewChild('draganddropimage', { static: true }) dragDropImageRef: ElementRef;

answered Sep 5, 2019 at 8:20

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carnaru Valentin · Accepted Answer · 2019-09-05 07:57:20Z

0

I think you decorate constructor, try to set a name for @ViewChild(draganddropimage) draganddropimage

answered Sep 5, 2019 at 7:57

Carnaru Valentin

1,92524 silver badges28 bronze badges

Comments

ilyas shabi · Accepted Answer · 2019-09-05 07:58:57Z

0

You need to import ElementRef and then use this snippet to get your template reference using ViewChild :

@ViewChild('draganddropimage') dragDropImageRef: ElementRef;

answered Sep 5, 2019 at 7:58

ilyas shabi

1941 silver badge7 bronze badges

1 Comment

Yasir Mehmood Over a year ago

Hi ilyas thanks for the reply but still not working getting error TS2554: Expected 2 arguments, but got 1.

Mustapha Larhrouch · Accepted Answer · 2019-09-05 08:26:49Z

0

You need to declare a variable and add the decorator to it :

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app-upload-card-details',
    templateUrl: './upload-card-details.component.html',
    styleUrls: ['./upload-card-details.component.css']
})
export class UploadCardDetailsComponent implements OnInit {
    @ViewChild('draganddropimage')
    private draganddropimage: ElementRef; 

    constructor() {}

    ngOnInit() {}
    }
}

edited Sep 5, 2019 at 8:26

answered Sep 5, 2019 at 7:56

Mustapha Larhrouch

3,4053 gold badges16 silver badges29 bronze badges

3 Comments

Yasir Mehmood Over a year ago

Hi @Mustapha thanks alot for reply but still its not working error im getting is error TS2554: Expected 2 arguments, but got 1.

Mustapha Larhrouch Over a year ago

I edited the answer. you must put the name of the viewChild as string @ViewChild('draganddropimage')

ilyas shabi Over a year ago

If you're using Angular 8 you need to add { static: true } Check this post stackoverflow.com/questions/56473899/…

AlexV · Accepted Answer · 2020-04-11 14:07:51Z

0

Just fighting with the same problem. You need to put something between the decorator and the constructor:

export class SomeComponent implements OnInit {
  @ViewChild(SomeChildComponent, { static: true })

  someVariable: SomeChildComponent; // this row is the magic (otherwise you decorate the constructor)

  constructor() {}

edited Apr 11, 2020 at 14:07

answered Apr 11, 2020 at 13:59

AlexV

2593 silver badges8 bronze badges

Collectives™ on Stack Overflow

Facing issue while calling @viewchild in angular

5 Answers 5

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related