ViewChild() works fine on latest plunker Angular version with the scenario you describe. Demonstration in this plunker : https://plnkr.co /edit/KzWnkE5Hvp7NUow6YAxy EDIT: Here is a replacement StackBlitz for the above Plunker: https://stackblitz.com/edit/angular-ivy-pzaglm component : ngAfterViewInit() { console.log(this.testView); // correctly outputs the element in console, not undefined } Check that ElementRef and ViewChild are correctly imported from … Read more
You can do something like this. Create a spy object for the ChildComponent like this. const childComponent = jasmine.createSpyObj(‘ChildComponent’, [‘childMethod’]); Then in the test, set the component’s childComponent property to the spy that you have created. component.childComponent = childComponent; Your test file should look like this. import { NO_ERRORS_SCHEMA } from “@angular/core”; import { ComponentFixture, … Read more
There are actually a couple of methods which you can access a particular inside you QueryLists 1st method: .filter() You can also use .map and .reduce based on your preferences // Since if you have 3 items in an array, the counting starts at 0, so 1 is the 2nd element const elementTwo = this.popovers.filter((element, … Read more
Make sure you import ViewChild and MatTable: import {Component, ViewChild} from ‘@angular/core’; import {MatTable} from ‘@angular/material’; Then you can get a reference to the table using the ViewChild (note that a type T is required on MatTable – I just used any, but if you have a typed table, you will need to use that … Read more
Try using a ref in your template instead: <div id=’gallery-container’ #galleryContainer class=”gallery-image-container”> <div class=”gallery-padding”></div> <img class=”gallery-image” src=”https://stackoverflow.com/questions/39256703/{{ coverPhotoVm }}” /> <img class=”gallery-image” src=”{{ imagepath }}” *ngFor=”let imagepath of imagesVm” /> </div> And use the ref name as the argument: @ViewChild(‘galleryContainer’) galleryContainer: ElementRef; EDIT Forgot to mention that any view child thus declared is only available … Read more
After migration to Angular 8 you should declare manually if it’s static or not @ViewChild(QuilldEditorComponent, {static: true}) quillEditorComponentInstance; If you have further questions ask them or for more details please read this issue https://github.com/angular/angular-cli/issues/14553 or take a look at offical documentation https://angular.io/guide/static-query-migration // query results available in ngOnInit @ViewChild(‘foo’, {static: true}) foo: ElementRef; OR // … Read more
@ViewChild(‘keywords-input’) keywordsInput; doesn’t match id=”keywords-input” id=”keywords-input” should be instead a template variable: #keywordsInput Note that camel case should be used, since – is not allowed in template reference names. @ViewChild() supports names of template variables as string: @ViewChild(‘keywordsInput’) keywordsInput; or component or directive types: @ViewChild(MyKeywordsInputComponent) keywordsInput; See also https://stackoverflow.com/a/35209681/217408 Hint: keywordsInput is not set before … Read more
In most cases you will want to use {static: false}. Setting it like this will ensure query matches that are dependent on binding resolution (like structural directives *ngIf, etc…) will be found. Example of when to use static: false: @Component({ template: ` <div *ngIf=”showMe” #viewMe>Am I here?</div> <button (click)=”showMe = !showMe”></button> ` }) export class … Read more
In Angular 8 , ViewChild takes 2 parameters @ViewChild(ChildDirective, {static: false}) Component
Use a setter for the ViewChild: private contentPlaceholder: ElementRef; @ViewChild(‘contentPlaceholder’) set content(content: ElementRef) { if(content) { // initially setter gets called with undefined this.contentPlaceholder = content; } } The setter is called with an element reference once *ngIf becomes true. Note, for Angular 8 you have to make sure to set { static: false }, … Read more