// PARENT app.component.ts
import { Component, OnInit } from '@angular/core';
import { Profile } from './entity/Profile';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent {
title = 'personal-finance-client';
profile : Profile = new Profile();
}
// PARENT app.component.html
<app-navbar *ngIf="profile" [profile]="profile" [title]="title" />
<div class="font-bold text-3xl">
{{title}}
{{profile.getName()}}
</div>
// CHILD navbar.component.html
<p>{{myTitle}}</p>
// CHILD navbar.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Profile } from '../entity/Profile';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit{
private _title? : string;
@Input()
set title(value: string | undefined){
this._title = value;
if(value){
this.myTitle = value;
}
}
get title() {
return this._title;
}
@Input() profile!: Profile;
profileName: string = this.profile?.getName();
myTitle!: string;
ngOnInit(): void {
alert(this.profile?.getName())
}
}
I had trouble rendering the `myTitle` in the child `navbar.component.html` file with the parent's title expected to be 'personal-finance-client'. Upon debugging by placing console.log inside `OnInit` of `navbar.component.ts`, it initially displayed as undefined, but then switched to the actual value of 'personal-finance-client'.
It appears that the child component captures only the initial `OnInit` value and does not update when a new value is detected?
Is this standard behavior because I am unable to successfully transmit the parent's value to the child's value in this scenario?
I attempted to implement `OnChanges` and direct the changed value to the new field, however, no value is reflected on the screen.