Category : viewchild

I’m trying to call an @ViewChild variable from within the function that is assigned to the MatTableDataSource’s filterPredicate. But it’s returning undefined when I call "this.filterCols" from within the function. I can read the variable from other methods and event listeners. Has anyone else dealt with this issue? Below is my markup element with the ..

Read more

import {Component, ElementRef, HostBinding, ViewChild} from ‘@angular/core’; export class MainPage { constructor( el: ElementRef ) { this.contentElement = el.nativeElement; } contentElement = null; @ViewChild(‘wrapper’, { static: true }) wrapper: ElementRef; this.size = this.wrapper.nativeElement.clientWidth – 36; result ERROR TypeError: Cannot read property ‘nativeElement’ of undefined console.log(this.wrapper); =>undefined in another component , It works well without any ..

Read more

@import ‘../../main-styles.scss’; .note-card-container { position: relative; background: white; border-radius: 5px; box-shadow: 0px 2px 15px 2px rgba(black, 0.068); transition: box-shadow 0.2s ease-out; margin-top: 35px; &:hover { cursor: pointer; box-shadow: 0px 0px 0px 4px rgba(black, 0.068); .x-button { opacity: 1; transform: scale(1); transition-delay: 0.35s; } } .note-card-content { padding: 25px; .note-card-title { font-size: 22px; font-weight: bold; color: ..

Read more

i am trying to toggle the visibility of child components from parent component by @ViewChild. i am setting visiblity of both child component as true from the allComponentVisibility=true of parent. And on some event, I set the allComponentVisibility=false and change the visiblity=true of particular component through @viewchild. But visiblity is not changing when i set ..

Read more

import { Component, OnInit, ViewChild } from ‘@angular/core’; import {Subject} from ‘rxjs’; import {debounceTime} from ‘rxjs/operators’; import {NgbAlert} from ‘@ng-bootstrap/ng-bootstrap’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent implements OnInit { staticAlertClose=false; successMesage=”; private _success = new Subject<string>(); @ViewChild(‘staticAlert’, {static: false}) staticAlert: NgbAlert; @ViewChild(‘selfClosingAlert’, {static: false}) selfClosingAlert: NgbAlert; ngOnInit(): void { //throw ..

Read more

I’ve been experiencing a problem with displaying a child component inside the parent one. I used @ViewChild(). This is the parent component html: <div class=”main-container”> <mat-accordion [multi]=”false” display=”default”> <mat-expansion-panel *ngFor=”let p of data” (opened)=”panelOpenState = true; setTime(p.hour)” (closed)=”panelOpenState = false”> <mat-expansion-panel-header> <mat-panel-title> {{p.hour}} </mat-panel-title> <mat-panel-description> </mat-panel-description> </mat-expansion-panel-header> <div *ngIf=”p.hour === ’01:00′” class=”no-data-div”>{{ ‘ACC.NODATA’ | translate}}</div> ..

Read more

I have this form: <form (ngSubmit)="onSubmit()" #form="ngForm"> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" ngModel id="name" class="form-control"> </div> … </form> Inside the .ts file I reach the form with @ViewChild("form", {static:false}) myForm: NgForm Now, starting from the field myForm, what is the best/easy way to reach and manipulate the other HTML elements inside the form, ..

Read more