Questions tagged [angular-lifecycle-hooks]

A component in Angular has a life-cycle, a number of different phases it goes through from birth to death. We can hook into those different phases to get some pretty fine grained control of our application.

To do this we add some specific methods to our component class which get called during each of these life-cycle phases, we call those methods hooks.

Reference

143 questions
1
vote
1 answer

Why we use - ngAfterContentInit lifecycle method

I am learning angular.There are a lot of lifecycle methods. For example ngOnChanges runs every time where is new value in the input properties in the child component - that are passed by value. I don't understand the method - ngAfterContentInit. In…
sdsd
  • 447
  • 3
  • 20
1
vote
2 answers

I got ExpressionChangedAfterItHasBeenCheckedError from child compoenent (timerrenderer), Angular 7

I'm getting the ExpressionChangedAfterItHasBeenCheckedError error from my child component. I tried to add detectChanges() method inside the ngOnchanges but it didn't work. I'm new to angular. I also tried the other questions' solutions but didn't…
1
vote
1 answer

In ngAfterViewInit life cycle hook images of the dom gets loaded completely?

So in my current project i am trying to create a products slider.For that to work correctly i need to get the the width of all the products so i can calculate the total width.Currently what i am doing is ngAfterViewInit(): void { …
sahil aktar
  • 101
  • 10
1
vote
0 answers

Angular 8 life cycle hook performance issue

I'm working on an Angular app which has a series of input fields with interdependent values i:e a lot of the field values are percentages of values from earlier component fields. I have a function setPercentages() which is where I calculate the…
sisko
  • 9,604
  • 20
  • 67
  • 139
1
vote
0 answers

"Cannot read property 'Component' of undefined" while calling a method of one component from another via params.context in Angular 8

export class ChildMessageRenderer implements ICellRendererAngularComp { public params: any; @ViewChild(SecComponent, { static: false }) accComponent: SecComponent; agInit(params: any): void { this.params = params; } public…
1
vote
1 answer

Clear static data on ngOnDestroy, after getting the data from service

I want to clear the data on ngOnDestroy. I am getting this static data from a service. Current scenario is I am using the same component for add-edit and I just want to clear the temporary static data once the user is done with editing. export class…
1
vote
2 answers

Real UseCases for ngDoCheck (Angular9)

I am a beginner in Angular & learning by myself and i have stucked in ngDoCheck life cycle method According to Documentation: Detect and act upon changes that Angular can't or won't detect on its own. Parent Component: user={ …
1
vote
3 answers

Expression has changed after it was checked - Event subscription updates

Though I know the reason as to why this ERROR happens, However, I would like to know how to overcome in the following scenario: I have a generic loader in app.component. For some of the child routes it'll update the loader value on ngOnInit life…
Basheer Kharoti
  • 4,202
  • 5
  • 24
  • 50
1
vote
2 answers

Angular 6 - expression has changed after it was checked error and async *ngIf

How do get rid of the mentioned error when *ngIf directive is based on an asynchronous condition? In my main component (products.ts) I am subscribed to an observable, that is a result of a user's selection, which he can make through interacting with…
1
vote
1 answer

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked while getting the value from ckEditor

I am trying to get the changed value i.e text from ckEditor and emit the resulted output to parent. Below is the corresponding code: editor.component.html:
1
vote
0 answers

fullCalendar click event not working after updating calendar header on ngAfterViewInit event

I have implemented FullCalendar in angular app and bind some events in full calendar. I have requirement to update calendar events with new data on button click plus display Day1, Day2, Day3... in place of Mon, Tues, Wed... So I have successfully…
Vinoth A
  • 173
  • 1
  • 1
  • 8
1
vote
1 answer

Angular lifecycle hooks and rendering components

Consider the following html: If I use the app-footer hook ngAfterViewInit() to append a script to the html which contains jQuery that handles elements in the…
iamdlm
  • 1,885
  • 1
  • 11
  • 21
1
vote
2 answers

How update *ngFor on updating array using observable and how to initialize observable on website load?

I have two components "cart" and "home". Here "home" component is displaying list of products and it is the first page of website. I want to update cart when someone add product to the cart using "cart" button. For that I have create a service using…
1
vote
1 answer

Angular component keeps rerendering when displayed in NgbModal and using (load) event handler in html template

When a components in bootstrap's modal dialog, it keeps rerendering couple of times per second. (I see it in browsers developer tools). The component looks like this: @Component({ selector: 'app-takeover', encapsulation: ViewEncapsulation.None, …
Liero
  • 25,216
  • 29
  • 151
  • 297
1
vote
0 answers

Angular 2 - Router instance for lazy loaded components

I am able to get the router instance in root module component with the following snippet import {NavigationEnd, Router} from '@angular/router'; constructor(public router: Router) {} ngOnInit() { this.router.events.subscribe((evt) => { …