Angular Components

Basic | Complete | Custom | inheritance

Inherits Directive

import { Component } from "@angular/core"
 
@Component()
export class UserProfile {}

Life Cycles

https://angular.dev/guide/components/lifecycle#summary

Phase	Method	Summary
Creation	constructor	Standard JavaScript class constructor . Runs when Angular instantiates the component.
Change Detection	ngOnInit	Runs once after Angular has initialized all the component’s inputs.
	ngOnChanges	Runs every time the component’s inputs have changed.
	ngDoCheck	Runs every time this component is checked for changes.
	ngAfterContentInit	Runs once after the component’s content has been initialized.
	ngAfterContentChecked	Runs every time this component content has been checked for changes.
	ngAfterViewInit	Runs once after the component’s view has been initialized.
	ngAfterViewChecked	Runs every time the component’s view has been checked for changes.
Rendering	afterNextRender	Runs once the next time that all components have been rendered to the DOM.
	afterEveryRender	Runs every time all components have been rendered to the DOM.
Destruction	ngOnDestroy	Runs once before the component is destroyed.

graph TD
  subgraph Creation
    A1[constructor]
  end

  subgraph Change_Detection
    B2[ngOnInit]
    B1[ngOnChanges]
    B3[ngDoCheck]
  end

  subgraph Content_Init
    C1[ngAfterContentInit]
    C2[ngAfterContentChecked]
  end

  subgraph View_Init
    D1[ngAfterViewInit]
    D2[ngAfterViewChecked]
  end

  subgraph Rendering
    E1[afterNextRender]
    E2[afterEveryRender]
  end

  subgraph Destruction
    F1[ngOnDestroy]
  end

  A1 --> B1 --> B2 --> B3 --> C1 --> C2 --> D1 --> D2 --> E1 --> E2 --> F1