لما تكون بتعمل custom component في Angular غالبا هتعمل كدة

@Component({
 template: `<p> {{ fullName }} </p>`,
})

export class NameComponent {
 @Input() firstName: string;
 @Input() lastName: string;
 fullName: string;

 ngOnInit() {
  this.fullName = `${this.firstName} ${this.lastName}`;
 }
}

ممكن يتهيألك ان الكود دة صح .. بس هو غلط!

طب اية مشكلته الكود دة ؟!!

لو جربت الكود هتلاقيه شغال معاك كويس .. او بمعني أدق هيتهيألك انه شغال كويس

المشكلة عنا انك استخدمت الـ hook الغلط

الهوك ngOnInit بيشتغل مرة واحدة بعد الـ inistansiation ودة معناه ان لو الـ parent component حدث الـ inputs, القيم الجديدة مش هتنعكس في الـ component بتاعك

الصح هنا اننا نستخدم ngOnChanges لانها بتشتغل مع كل مرة الـ inputs بتتغير

ngOnChanges() {
  this.fullName = `${this.firstName} ${this.lastName}`;
 }

بالمناسبة, لو الحالة بتاعتنا بسيطة زي دي, احنا حتي مش مضطرين نستخدم اي hook, ممكن نوصل لنفس النتيجة باستخدام getters

export class NameComponent {
  @Input() firstName: string;
  @Input() lastName: string;
 
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`
  }
}

دلوقت كل مرة أي input هيتغير, fullName هيتحدث اوتوماتيك

angular