viewchild

Angular 2 @ViewChild not working. Cannot Read Property “title” of Undefined

由 一个人想着一个人 提交于 2019-12-11 02:03:20
问题 I am unable to access the property of component even after importing with @ViewChild. Below is the code. header.monitor.component.ts import { AdminComponent } from 'admin/admin.component'; import { Component } from '@angular/core'; import { ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'monitor-header', templateUrl: './header.monitor.component.html', styleUrls: ['./header.monitor.component.css'] }) export class HeaderMonitorComponent implements AfterViewInit {

Angular ViewChild custom sort selector

由 本小妞迷上赌 提交于 2019-12-10 22:34:09
问题 I'm learning about angular ViewChild currently, but I seem to be missing something when using ViewChild to select custom reference variables from the DOM. In my template I have two tables: <mat-table #eventTable [dataSource]="eventDataSource" matSort> <mat-table #eventDateTable [dataSource]="dateEventDataSource" matSort> I am attempting to target them with a sort for each: @ViewChild('eventTable') eventTableSort: MatSort; @ViewChild('eventDateTable') eventDateTableSort: MatSort; Then I

Angular 2+: Get child element of @ViewChild()

由 馋奶兔 提交于 2019-12-10 14:28:36
问题 How can I access the child elements (here: <img> ) of @ViewChild() in Angular 2+ without explicit declaration? In template.html <div #parent> <!-- There can be anything than <img> --> <img src="http://localhost/123.jpg" alt=""> </div> In component.ts @ViewChild('parent') parent; public getFirstChild() { this.firstChild = this.parent.? // } The aim is, to be able to create a universal component that uses: <div #parent> <ng-content></ng-content> </div> So the child elements of #parent need to

Update innerhtml of element using viewchild in angular 2

由 拟墨画扇 提交于 2019-12-10 11:03:24
问题 I have html element like <section class="" #hiddenElement> <span>title</span> <span class="value"></span> </section> I access the element in component using @ViewChild('hiddenElement') hiddenElement: ElementRef; How do i update the innerhtml of element whose class is value? 回答1: You can get hiddenElement children using nativeElement.children , filter them by className and modify their innerHTML using element.innerHTML Something like this Array .from(this.hiddenElement.nativeElement.children)

angular append component to respective tabs

由 笑着哭i 提交于 2019-12-10 10:55:59
问题 I am trying to append component (dynamic created) to respective tabs using angular material and @viewChild but it is going to first tab only when I click button in the 2nd tab. Here is Stackblitz - angular-append-component-to-respective-tabs It's not displaying in individual tab. I have 3 tabs. all 3 tabs contains Add button, when I click on 1st tab's button, it's adding that component in 1st tab but when I click on 2nd tab's Add button, it's adding that component in 1st tab only, it should

How viewChild can get elements that added with js in angular2?

由 筅森魡賤 提交于 2019-12-09 13:37:10
问题 If a HTML element has been added to the DOM(for example after click on button), How can we access this element? viewChild can't see that. Update 1: More description I've used jquery datatable (jquery.dataTables definitelyTyped version). Base on this link, I can add new column and define html inside that. I wrote this code : columnDefs: [ { render: function (data, type, row) { return ` <a href="admin/edituser/` + row.UserId+ `" class="btn btn-outline btn-circle btn-sm green"><i class="fa fa

Calling renderRows() on Angular Material Table

由 允我心安 提交于 2019-12-08 23:37:25
问题 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

Expression has changed error on Opening a Modal Popup inside a component

由 白昼怎懂夜的黑 提交于 2019-12-07 07:03:16
问题 I have a parent component and i am passing some HTML from it to a child common component using @ViewChild(). When Child component loads up a popup. Console throws below error. "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: this is description'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?" I

@ViewChildren does not get updated with dynamically added DOM elements

由 折月煮酒 提交于 2019-12-07 05:02:31
问题 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

child parent communication best practices in Angular

由 本秂侑毒 提交于 2019-12-05 16:56:04
I'm trying to become better at Angular and I want to know the best practices between child-parent communication. My current app I want to work on is on Angular 6. I know I can communicate between child-parent components using @ViewChild, @Output or creating a service. Is there another way to do the communication? if not which one of those 3 is better and why? Here's a simple example: Child HTML <button (click)="onLinkedClicked();">Click me</button> Child TS import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; . . . export class showcaseMenuComponent implements OnInit
订阅 viewchild