viewchild

I have the following DOM structure <div #carousalElement> <div class="singleCaousalElement"> <a> <img [src]="carousalURL1" class="carousalImage"> </a> </div> <div class="singleCaousalElement"> <a> <img [src]="carousalURL2" class="carousalImage"> </a> </div> </div> I can get the all divs with carousalElements class using the ViewChildren @ViewChildren('carousalElement') carousalElements; PROBLEM: When I dynamically add a new div under the #carousalElement div, it does not show up under the carousalElements array. Am I missing something obvious? Angular doesn't recognize HTML not added by

First of all, let me start off with saying that I did read the docs, some articles, the ng-book chapter, etc. I still don't have a good grasp of how these things work. With that said, consider the following: import { Component, ViewChild, ElementRef } from '@angular/core' @Component({ selector: 'home', template: ` <div>Test</div> <input type="text"#testElem> <input type="text"#testElem2> ` }) export class HomeComponent{ @ViewChild('testElem') el:ElementRef; @ViewChild('testElem2') el2:ElementRef; ngAfterViewInit() { this.el.nativeElement.style.background = "red"; this.el.nativeElement.style

I've looked at several related posts and documentation, but still can't seem to get expected behavior from @ViewChild. Ultimately, I'm trying to set the scroll position of a div. This element isn't a component, but a normal div in my HTML. To accomplish this, I'm trying to use @ViewChild to get the DOM element I need, and set its scroll value. (As an aside, if you know a better way to accomplish this without @ViewChild (or jQuery), answers will be very much appreciated!) At the moment, @ViewChild only returns undefined. Going through some dummy checks: - I am accessing my element in

I have a strange behaviour of @ViewChildren corresponding to children components generated by ngFor. @ViewChildren query does not see element standing in array for a quite long time. All my code is in the Plunker - see with console opened. This is my main component: @Component({ selector: 'my-app', template: ` <button (click)="addInternalComponent()">Add internal component</button> <app-internal #internals *ngFor="let i of indexes" [index]="i (afterViewInit)="onAfterViewInit()"></app-internal> `, }) export class App { @ViewChildren('internals') internals: QueryList<InternalComponent>; indexes

How can I add component dynamically? toolbar.component.ts: @Component({ selector: 'app-toolbar', template: '<button>Add Text component</button>' }) export class ToolbarComponent { constructor() { } } section.component.ts: @Component({ selector: 'div[app-type=section]', template: '' }) export class SectionComponent { constructor() { } } text.component.ts: @Component({ selector: 'app-text', template: '<p>This is dynamically component</p>' }) export class TextComponent { constructor() { } } view.component.ts: @Component({ selector: 'app-view', template: `<div class="container"> <app-toolbar></app

I'm trying to get my Angular Table to refresh after updating the data used in the table. The docs say "you can trigger an update to the table's rendered rows by calling its renderRows() method." but it is not like a normal child component where I can use something "@ViewChild(MatSort) sort: MatSort;" since I do not import it. If I do import it and try something like @ViewChild('myTable') myTable: MatTableModule; then I get an error that says that renderRows() does not exist on that type. How can I call this method? Thanks! My table code snippet: <mat-table #table [dataSource]="dataSource"