Sharing information with ViewChild within an Angular component

Question

Sharing information with ViewChild within an Angular component

Is there a way to transfer data from a component to a view child element? For example, I have declared the following variable in the component:

@ViewChild('warningNotification', { static: false }) warningNotification: jqxNotificationComponent;
public test: string = "NIshan";

Now, I have an element on the HTML page

<jqxNotification #warningNotification
             [template]="'warning'"
             [blink]="false"
             [autoOpen]="false"
             [autoClose]="true"
             [closeOnClick]="true"
             [position]="'top-right'"
             [opacity]="0.9"
             [width]="'auto'">
<div><span>
        {{test}}
</span>
</div>
</jqxNotification>

Unfortunately, the {{test}} section is not rendering any text. How can I fix this issue?

angular typescript

Answer 1

Answer №1

Within the ngAfterViewInit lifecycle hook:

ngAfterViewInit(){
  this.warningNotification=this.test
}

Note: It may be necessary to wrap this code in a setTimeout function to prevent the "change after checked" error:

ngAfterViewInit(){
   setTimeout(()=>{
      this.warningNotification=this.test
   })
}

Answer 2

Within the ngAfterViewInit lifecycle hook:

ngAfterViewInit(){
  this.warningNotification=this.test
}

Note: It may be necessary to wrap this code in a setTimeout function to prevent the "change after checked" error:

ngAfterViewInit(){
   setTimeout(()=>{
      this.warningNotification=this.test
   })
}

Sharing information with ViewChild within an Angular component

Answer №1

Similar questions

Can multiple Observables be used to display FormArray data within a FormGroup effectively?

What is the process for defining the type or interface of an object in Visual Studio Code?

Converting UK DateTime to GMT time using Angular

leveraging third party plugins to implement callbacks in TypeScript

Performing an HTTP POST request in Angular 2

Why is the getElement().getProperty("value") function not functioning properly?

Tips for ensuring your controls function properly and seamlessly when switching to another page

Utilizing Async/Await with Node.js for Seamless MySQL Integration

Retrieve the chosen option from a dropdown list in Angular by utilizing reactive forms

What is the best way to modify the color of a table cell in Typescript with *ngFor loop?

The missing properties in the TS Type are as follows:

How can I retrieve the value of a promise in Promise.map?

New techniques for integrating jQuery with Angular 4

Error: No provider found for _HttpClient in the NullInjector context

Extracting individual parameters from a specific URL in Angular 9

Loading and unloading an Angular 6 component

Potential absence of value in this Vue 3 component's 'this' placement

Challenges of implementing dark mode with a checkbox and local storage

Retrieve the values of a dynamic JSON object and convert them into a comma-separated string using Typescript

Angular 17 component fails to detect signal updates