Angular Lifecycle Hooks Part 6 - ngAfterViewInit

[@virutchamtechs9700]

Try the code
//a component
ngAfterContent
I am a

BComponent Content DOM

//b component
I am bcomponent
click
//b compoenent.ts
import { Component , AfterContentChecked,AfterContentInit,ContentChild,Renderer2,ElementRef,OnInit,viewChild,AfterViewInit, ViewChild } from '@angular/core';
import { CComponent } from '../c/c.component';
@Component({
selector: 'app-b',
standalone: true,
imports: [CComponent],
templateUrl: './b.component.html',
styleUrl: './b.component.css'
})
export class BComponent implements AfterContentChecked,AfterContentInit,OnInit,AfterViewInit {
@ContentChild("BHeader",{read:ElementRef}) hRef:ElementRef |undefined
@ViewChild(CComponent,{read:ElementRef}) cRef:ElementRef |undefined
constructor(private renderer:Renderer2)
{
console.log("constructor")
}
ngAfterViewInit(): void {
console.log("ngafterviewinit")
this.renderer.setStyle(this.cRef?.nativeElement.children.item(0),'background-color',this.randomRGB())
this.renderer.setStyle(this.cRef?.nativeElement.children.item(1),'background-color',this.randomRGB())

}
ngOnInit(): void {
console.log("ngInit",this.hRef)
}
ngAfterContentChecked(): void {
console.log("ngaftercontentchecked",this.hRef)
this.renderer.setStyle(this.hRef?.nativeElement,'background-color',this.randomRGB())

}
ngAfterContentInit(): void {
console.log("ngAfterContentInit",this.hRef)
}
randomRGB(): string {
return `rgb(${Math.floor(Math.random() * 256)},
${Math.floor(Math.random() * 256)},
${Math.floor(Math.random() * 256)})`;
}
}
//C component
I am C component
welcome to life cycle

[@vijayamurugan2023]

Your videos are very good... pls update project videos... and angular.. interview questions pls update...

[@virutchamtechs9700]

Sure what kind of project videos you need